<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>
CSS3 Button 10
Unknown
Web DesignerResponsive Web Designer.. Shurvir Mori - Name is Enough. You can search on Google
0 comments:
Post a Comment