<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;
}
