This time,
fostrap would give the tutorials
button hover animation, although very much a hover
button is very beautiful, but this one is also not less beautiful.
1. Buttons Hover with SVG
The HTML <a class="btnfos btnfos-1" href="https://www.blogger.com/null">
<svg>
<rect fill="none" height="100%" width="100%" x="0" y="0">
</rect></svg>
Hover
</a>
The CSS
* {
-moz-box-sizing: inherit;
box-sizing: inherit;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
html,
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
body {
background: #3498db;
}
.btnfos {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
max-width: 160px;
margin: 0 auto 2em;
position: relative;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
text-align: center;
}
@media (min-width: 400px) {
.btnfos {
display: inline-block;
margin-right: 2.5em;
}
.btnfos:nth-of-type(even) {
margin-right: 0;
}
}
@media (min-width: 600px) {
.btnfos:nth-of-type(even) {
margin-right: 2.5em;
}
.btnfos:nth-of-type(5) {
margin-right: 0;
}
}
.btnfos-1 {
background: #3498db;
font-weight: 100;
}
.btnfos-1 svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 45px;
}
.btnfos-1 rect {
fill: none;
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 422, 0;
}
.btnfos-1:hover {
background: rgba(225, 51, 45, 0);
letter-spacing: 1px;
font-weight: 900;
}
.btnfos-1:hover rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
2. Button Action CSS 3
The HTML <a class="btnfos btnfos-2" href="">Hover</a>
The CSS
* {
-moz-box-sizing: inherit;
box-sizing: inherit;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
html,
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
body {
background: #3498db;
}
.btnfos {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
max-width: 160px;
margin: 0 auto 2em;
position: relative;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
text-align: center;
}
@media (min-width: 400px) {
.btnfos {
display: inline-block;
margin-right: 2.5em;
}
.btnfos:nth-of-type(even) {
margin-right: 0;
}
}
@media (min-width: 600px) {
.btnfos:nth-of-type(even) {
margin-right: 2.5em;
}
.btnfos:nth-of-type(5) {
margin-right: 0;
}
}
.btnfos-2 {
letter-spacing: 0;
}
.btnfos-2:hover,
.btnfos-2:active {
letter-spacing: 5px;
}
.btnfos-2:after,
.btnfos-2:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid rgba(255, 255, 255, 0);
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
-webkit-transition: all 280ms ease-in-out;
transition: all 280ms ease-in-out;
width: 0;
}
.btnfos-2:hover:after,
.btnfos-2:hover:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-color: #fff;
-webkit-transition: width 350ms ease-in-out;
transition: width 350ms ease-in-out;
width: 70%;
}
.btnfos-2:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
3. Style With Shadow
The HTML<a class="btnfos btnfos-3" href="">Hover</a>
The CSS
* {
-moz-box-sizing: inherit;
box-sizing: inherit;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
html,
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
body {
background: #3498db;
}
.btnfos {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
max-width: 160px;
margin: 0 auto 2em;
position: relative;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
text-align: center;
}
@media (min-width: 400px) {
.btnfos {
display: inline-block;
margin-right: 2.5em;
}
.btnfos:nth-of-type(even) {
margin-right: 0;
}
}
@media (min-width: 600px) {
.btnfos:nth-of-type(even) {
margin-right: 2.5em;
}
.btnfos:nth-of-type(5) {
margin-right: 0;
}
}
.btnfos-3 {
background: #3498db;
border: 1px solid white;
box-shadow: 0px 2px 0 white, 2px 4px 6px #eee;
font-weight: 900;
letter-spacing: 1px;
-webkit-transition: all 150ms linear;
transition: all 150ms linear;
}
.btnfos-3:hover {
background: #3498db;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
color: #74e6e0;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
4. This is Very Awesome
The HTML <a class="btnfos btnfos-4" href="">Hover</a>
The CSS
* {
-moz-box-sizing: inherit;
box-sizing: inherit;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
html,
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
body {
background: #3498db;
}
.btnfos {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
max-width: 160px;
margin: 0 auto 2em;
position: relative;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
text-align: center;
}
@media (min-width: 400px) {
.btnfos {
display: inline-block;
margin-right: 2.5em;
}
.btnfos:nth-of-type(even) {
margin-right: 0;
}
}
@media (min-width: 600px) {
.btnfos:nth-of-type(even) {
margin-right: 2.5em;
}
.btnfos:nth-of-type(5) {
margin-right: 0;
}
}
.btnfos-4 {
border: 1px solid;
overflow: hidden;
position: relative;
}
.btnfos-4 span {
z-index: 20;
}
.btnfos-4:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
width: 50px;
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
z-index: -10;
}
.btnfos-4:hover:after {
left: 120%;
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
5. Hover In Out !
The HTML <a class="btnfos btnfos-2" href="">Hover</a>
The CSS
* {
-moz-box-sizing: inherit;
box-sizing: inherit;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
html,
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
body {
background: #3498db;
}
.btnfos {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
max-width: 160px;
margin: 0 auto 2em;
position: relative;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
text-align: center;
}
@media (min-width: 400px) {
.btnfos {
display: inline-block;
margin-right: 2.5em;
}
.btnfos:nth-of-type(even) {
margin-right: 0;
}
}
@media (min-width: 600px) {
.btnfos:nth-of-type(even) {
margin-right: 2.5em;
}
.btnfos:nth-of-type(5) {
margin-right: 0;
}
}
.btnfos-5 {
border: 0 solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(255, 255, 255, 0);
outline-offset: 0px;
text-shadow: none;
-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
outline-color: rgba(255, 255, 255, 0.5);
outline-offset: 0px;
}
.btnfos-5:hover {
border: 1px solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
outline-offset: 15px;
outline-color: rgba(255, 255, 255, 0);
text-shadow: 1px 1px 2px #427388;
}
