"button...."
Bootstrap 3.3.0 Snippet by rajuk66

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrap"> <a href="#" class="button">Hover Me!</a> <a href="#" class="button2">Awesome Button</a> </div>
body { background-image: url(http://p1.pichost.me/i/11/1344899.jpg); background-size: cover; background-repeat: no-repeat; font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; } .wrap { position: absolute; top: 50%; left: 50%; margin-top: -86px; margin-left: -89px; text-align: center; } a { -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); display: block; margin: 20px auto; max-width: 180px; text-decoration: none; border-radius: 4px; padding: 20px 30px; } a.button { color: rgba(30, 22, 54, 0.6); box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset; } a.button:hover { color: rgba(255, 255, 255, 0.85); box-shadow: rgba(30, 22, 54, 0.7) 0 0px 0px 40px inset; } a.button2 { color: rgba(30, 22, 54, 0.6); box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset; } a.button2:hover { color: rgba(255, 255, 255, 0.85); box-shadow: rgba(30, 22, 54, 0.7) 0 80px 0px 2px inset; }

Related: See More


Questions / Comments:

is there any alternative way to handle css. Does it have to be a class?

Firat Kacmaz () - 8 years ago - Reply 0