CSS3 Button 10

by 02:07 0 comments

<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>

Shurvir Mori

Unknown

Web Designer

Responsive Web Designer.. Shurvir Mori - Name is Enough. You can search on Google

0 comments:

Post a Comment