"Buttons.Css - Project"
Bootstrap 3.0.0 Snippet by badrrehman

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html> <head> <title>BUTTONS.CSS</title> <link rel="stylesheet" type="text/css" href="buttons.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css "> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> body{ background-color: #595959; color:#fff; } </style> </head> <body> <section> <div style="padding: 70px;" class="cont-bg"> <div style="margin-top: 40px;" class="container"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-backfill butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-fillTrans butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-backFillIn butn-lrg">Button</a> </center> </div> </div> </div> <div style="margin-top: 40px;" class="container "> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-backTransIn butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-backTransOut butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-diagfill butn-lrg">Button</a> </center> </div> </div> </div> <div style="margin-top: 40px;" class="container "> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-glowBall butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-backShad butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-topFill butn-lrg">Button</a> </center> </div> </div> </div> <div style="margin-top: 40px;" class="container"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-borderIn butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-borderOut butn-lrg">Button</a> </center> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <center> <a href="#" class="butn butn-txtbold butn-lrg">Button</a> </center> </div> </div> </div> </div> <div> <p>DOWNLOAD BUTTONS.CSS STYLE SHEET FREE FOR STYLING OF WEB BUTTONS.</p> <p><a href="https://github.com/badrrehman">DOWNLOAD</a></p> </div> </section> </body> </html>
.butn { flex: 1 1 auto; margin: 10px; padding: 10px; text-align: center; background-size: 200% auto; color: black; border-radius: 0px; background-color:transparent; } /* button back fill*/ .butn-Button { color:#000; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .butn-Button:hover, .butn-Button:focus, .butn-Button.focus, .butn-Button:active, .butn-Button.active, .open > .dropdown-toggle.butn-Button { border: 1px solid green; color: green; background-position: right center; text-decoration:none; background-image: linear-gradient(to right, #30B026 52%, transparent 50%); /* button sizes here */ .butn-reg, .butn-group-reg > .butn { padding: 10px 16px; font-size: 16px; line-height: 1.3333333; border-radius: 0px; } .butn-med, .butn-group-med > .butn { padding: 12px 18px; font-size: 22px; line-height: 1.4333333; border-radius: 0px; } .butn-lrg, .butn-group-lrg > .butn { padding: 15px 20px; font-size: 27px; line-height: 1.5333333; border-radius: 0px; } /* back Fill In */ .butn-ButtonIn { color:#000; transition: background-image 1s ease-out; -webkit-transition: background-image 1s ease-out; -moz-transition: 1s ease; -o-transition: 1s ease; } .butn-ButtonIn:hover, .butn-ButtonIn:focus, .butn-ButtonIn.focus, .butn-ButtonIn:active, .butn-ButtonIn.active, .open > .dropdown-toggle.butn-ButtonIn { background-position:right center; text-decoration:none; color:#fff; background-image: linear-gradient(-90deg, #E42C2F 52% , #D0C90E 10% ); } /* button shadow */ .butn-shade{ box-shadow: 5px 5px 20px grey; } .clr-container { background-color:#08ACD5; color:#E4E4E4; padding-top:5px; padding-right: 80px; padding-left: 80px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } @font-face{ font-family:ginebra; src:url(../fonts/ginebra.ttf); } @font-face{ font-family:Squiggler; src:url(../fonts/Squiggler.ttf); } .butn-diagfill{ background-image:linear-gradient(to bottom right, #1565c0 62.5%, #46b749 50%); } .butn-diagfill:hover, .butn-diagfill:focus, .butn-diagfill.focus, .butn-diagfill:active, .butn-diagfill.active, .open > .dropdown-toggle.butn-diagfill { color:#fff; background-position: right center; text-decoration:none; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; } .butn-backTransOut{ background-color:#D72225; -webkit-transition: background-color 1s ease; -moz-transition: background-color 1s ease; -o-transition: background-color 1s ease; transition: background-color 1s ease; } .butn-backTransOut:hover, .butn-backTransOut:focus, .butn-backTransOut.focus, .butn-backTransOut:active, .butn-backTransOut:active, .open > .dropdown-toggle.butn-backTransOut { background-color: transparent; cursor: pointer; text-decoration:none; } .butn-backTransIn{ -webkit-transition: background-color 1s ease-out; -moz-transition: background-color 1s ease-out; -o-transition: background-color 1s ease-out; transition: background-color 1s ease-out; } .butn-backTransIn:hover, .butn-backTransIn:focus, .butn-backTransIn.focus, .butn-backTransIn:active, .butn-backTransIn:active, .open > .dropdown-toggle.butn-backTransIn { color:#EDEDED; background-color:#D72225; cursor: pointer; text-decoration:none; } .butn-glowBall { background-image: radial-gradient(circle, #5FD7E5 4%, #018EB1 30%); } .butn-glowBall:hover, .butn-glowBall:focus, .butn-glowBall.focus, .butn-glowBall:active, .butn-glowBAll.active, .open > .dropdown-toggle.butn-glowBall { color:#000; background-position: right center; text-decoration:none; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; } .butn-fillTrans { color:#000; background-image: linear-gradient(-90deg, #D47C26 50% , transparent 10% ); } .butn-fillTrans:hover, .butn-fillTrans:focus, .butn-fillTrans.focus, .butn-fillTrans:active, .butn-back.active, .open > .dropdown-toggle.butn-fillTrans { background-position:right center; text-decoration:none; color:#fff; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; } /* Back Shad */ .butn-backShad { color:#fff; background-image: radial-gradient(circle, #101010 45%, #D72225 50%); } .butn-backShad:hover, .butn-backShad:focus, .butn-backShad.focus, .butn-backShad:active, .butn-backShad.active, .open > .dropdown-toggle.butn-backShad { color:#fff; background-position: right center; text-decoration:none; transition: 2s; -webkit-transition: 2s; -moz-transition:2s; -o-transition: 2s; } .butn-topFill{ background-color:#000000; color:#D0C90E; position: relative; box-sizing: border-box; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition:all 500ms ease; -o-transition: all 500ms ease; } .butn-topFill:before{ content:''; position: absolute; top: 0px; left: 0px; width: 100%; height:0%; background:rgba(255,255,255,0.3); transition: all 1s ease; } .butn-topFill:hover{ color:#fff; text-decoration:none; } .butn-topFill:hover:before{ height: 100%; } .butn-borderIn{ background-color:transparent; border-bottom:1px solid black; } .butn-borderIn:hover{ outline:2px solid black; text-decoration:none; transition:0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; } .butn-txtbold{ background-color:transparent; font-weight:normal; position:relative; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; } .butn-txtbold:hover, .butn-txtbold:focus{ text-decoration:none; font-weight:bolder; } .butn-txtbold:hover:after{ content:"\f004"; color:#f00; margin-left:3px; } .butn-borderOut{ background-color:transparent; border:2px solid black; } .butn-borderOut:hover, .butn-borderOut:focus{ text-decoration:underline; border:0px solid transparent; transition:0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; } .container-butn{ padding: 80px; } .cont-bg:hover{ background-color: blue; } .margintop{ margin-top: 30px; }

Related: See More


Questions / Comments: