Skip to content

Instantly share code, notes, and snippets.

@jaeschrich
Last active December 16, 2015 08:39
Show Gist options
  • Save jaeschrich/5407749 to your computer and use it in GitHub Desktop.
Save jaeschrich/5407749 to your computer and use it in GitHub Desktop.
Simple, flat buttons
/*
simple, flat buttons
http://jsbin.com/icozal/2
*/
.btn-blue {
border-style: none;
border-radius: 0px;
background-color: #2BF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
padding: 10px;
color: #FFF;
font-size: 14px;
}
.btn-blue:hover {
cursor: pointer;
background-color: #1AD;
}
.btn-blue:active {
background-color: #2BF;
}
.btn-orange {
border-style: none;
border-radius: 0px;
background-color: #FB2;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
padding: 10px;
color: #FFF;
font-size: 14px;
}
.btn-orange:hover {
cursor: pointer;
background-color: #F91;
}
.btn-orange:active {
background-color: #FB2;
}
.btn-red {
font-size: 14px;
border-style: none;
border-radius: 0px;
background-color: #F11;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
padding: 10px;
color: #FFF;
}
.btn-red:hover {
cursor: pointer;
background-color: #E00;
}
.btn-red:active {
background-color: #F11;
}
.btn-green {
font-size: 14px;
border-style: none;
border-radius: 0px;
background-color: #3E3;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
padding: 10px;
color: #FFF;
}
.btn-green:hover {
cursor: pointer;
background-color: #0D0;
}
.btn-green:active {
background-color: #3E3;
}
.btn-purple {
font-size: 14px;
border-style: none;
border-radius: 0px;
background-color: #F4F;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
padding: 10px;
color: #FFF;
}
.btn-purple:hover {
cursor: pointer;
background-color: #D3D;
}
.btn-purple:active {
background-color: #F4F;
}
.btn-normal {
font-size: 14px;
border-style: none;
border-radius: 0px;
background-color: #BBB;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
padding: 10px;
color: #FFF;
}
.btn-normal:hover {
cursor: pointer;
background-color: #999;
}
.btn-normal:active {
background-color: #BBB;
}
.large {
padding: 20px;
font-size: 18px;
padding-right: 50px;
padding-left: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment