"Fat and Flat blue button"
Bootstrap 3.1.0 Snippet by nitroale

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <head> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <button href="#" class="btn btn-xlarge" /><i class="fa fa-clock-o fa-5x" ></i></button> <button href="#" class="btn btn-xlarge" /><i class="fa fa-chevron-up fa-5x" ></i></button> </div> </div>
/* Blue Flat Button ==================================================*/ .btn-xlarge{ position: relative; vertical-align: center; margin: 30px; /*width: 100%;*/ height: 100x; padding: 48px 48px; font-size: 22px; color: white; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background: #62b1d0; border: 0; border-bottom: 3px solid #9FE8EF; cursor: pointer; -webkit-box-shadow: inset 0 -3px #9FE8EF; box-shadow: inset 0 -3px #9FE8EF; } .btn-xlarge:active { top: 2px; outline: none; -webkit-box-shadow: none; box-shadow: none; } .btn-xlarge:hover { background: #45E1E8; }

Related: See More

Paper Bootstrap Wizard
Hexa shape button
Outlined Flat Buttons
Flat Responsive Dashboard Design

Questions / Comments:

Very nice buttons. I can imagine using these in my future projects, well done :)

AZU () - 10 years ago - Reply 0