<html>
<head>
<style>
body{
overflow:hidden;
}
.container{
background:#fff;
width:100%;
position:absolute;
left:45%;
}
.animatedButton{
font-family: Arial, sans-serif;
text-decoration: none !important;
background-color:#f90;
padding-left: 40px;
padding-right: 40px;
height: 38px;
line-height: 38px !important;
display: inline-block;
border: 1px solid #f40;
text-shadow:0px 1px 1px #000;
box-shadow: inset 0px 1px 1px #fff, 0 1px 0px 0px #000;
border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
color:#000;
}
.animatedButtonText{
font-family: Arial, sans-serif;
line-height: 38px !important;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.animatedButton:hover{
background-color:#f50;
-webkit-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
text-shadow:0px -1px 1px #000;
color:#000;
}
.animatedButton:hover .animatedButtonText{
text-shadow:0px -1px 1px #000;
color:#fff;
}
/*** SECOND BUTTON ***/
.animatedButton2{
text-decoration: none !important;
background-color:#f90;
padding-left: 40px;
padding-right: 40px;
height: 38px;
line-height: 38px !important;
display: inline-block;
border: 1px solid #450003;
text-shadow:0px 1px 1px #000;
box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #330;
border-radius: 5px;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
}
.animatedButtonText2{
font-family: Oswald, Arial, sans-serif;
line-height: 38px !important;
font-size: 18px;
color: #EAEAEA;
text-align:center;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.animatedButton2:hover{
background-color:#690;
margin-top:5px;
color:#fff;
-webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
-moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
}
.animatedButton2:hover .animatedButtonText2{
text-shadow:1px 0px 1px #fff;
color:#000;
}
/*** THIRD BUTTON ***/
.animatedButton3{
font-family: Oswald, Arial, sans-serif;
text-decoration: none !important;
background-color:#f90;
padding-left: 20px;
padding-right: 20px;
height: 38px;
line-height: 38px !important;
display: inline-block;
border: 1px solid #450003;
text-shadow:0px 1px 1px #000;
overflow: hidden;
-webkit-box-shadow: inset 0px 1px 1px #fff;
-moz-box-shadow: inset 0px 1px 1px #fff;
box-shadow: inset 0px 1px 1px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.animatedButtonText3{
font-family: Oswald, Arial, sans-serif;
line-height: 38px !important;
display: block;
font-size: 18px;
color: #EAEAEA;
text-align:center;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.animatedButton3:hover{
background-color:#690;
height:75px;
-webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
-moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
}
.animatedButtonExtraText3{
font-family: Arial, sans-serif;
font-size:12px;
color:#fff;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<a href="#" class="animatedButton" onClick="return false;">
<span class="animatedButtonText">HOVER Me</span>
</a>
<br><br><br><br>
<a href="#" class="animatedButton3" onClick="return false;">
<span class="animatedButtonText3">HOVER Me</span>
<span class="animatedButtonExtraText3">SOME EXTRA TEXT</span>
</a>
<br><br><br><br>
<a href="#" class="animatedButton2" onClick="return false;">
<span class="animatedButtonText2">HOVER Me</span>
</a>
</body>
</html>
0 comments:
Post a Comment