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

<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> .btn3d { transition:all .08s linear; position:relative; outline:medium none; -moz-outline-style:none; border:0px; margin-right:10px; margin-top:15px; } .btn-success { box-shadow:0 0 0 1px #5cb85c inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4cae4c, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); background-color:#5cb85c; </head>
/* 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


Questions / Comments: