buttons.css

@charset "UTF-8";
/* 
* EasUI |Â A simple & lovely responsive CSS framework.
* ----------------------------------------------------------
* https://github.com/interwebstars/EASUI
* ----------------------------------------------------------
*
* Made by : Interwebstars (https://github.com/interwebstars)
* Licensed under MIT
* 
* Buttons.css
*/
/*
* color base : 
* (http://flatuicolors.com)
*
* $primary : #1abc9c
* $deeper-primary : #16a085
*
* $green : #2ecc71
* $deeper-green : #27ae60 
*
* $blue : #3498db
* $deeper-blue : #2980b9
*
* $red : #e74c3c
* $deeper-red : #c0392b
*
* $purple : #9b59b6
* $deeper-purple : #8e44ad
*
*
* $black : #34495e
* $deeper-black : #2c3e50
*
*
* $white : #ecf0f1
* $deeper-white : #bdc3c7
*
*
* $yellow : #f1c40f
* $deeper-yellow : #f39c12
*
* $orange : #e67e22;
* $deeper-orange: #d35400;
*
**/
/* Buttons starts here */
.btn {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  border-radius: 1px;
  position: relative;
  color: #fff;
  font-size: 1.2em;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  font-style: normal;
  cursor: pointer;
  vertical-align: bottom;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  text-decoration: none;
  background: #ecf0f1;
  margin: .2em 0;
  padding: .2em;

font-weight:400;
  min-width:4em;
  padding:.2em .4em;
  margin:.1em 0;
border:0;}

a.btn {
  text-decoration: none;
  color: #fff;
}

a:hover, a:active {
  outline: 0;
}

a:hover, .btn:hover, a.btn:hover {
  border: 0;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
  background-repeat: repeat-x;
}



.btn:active {
  position: relative;
  border-bottom: 0;
  top: 1px;
}

.btn.btn--base {
  background: #1abc9c;
}

.btn.btn--green {
  background: #2ecc71;
}

.btn.btn--blue {
  background: #3498db;
}

.btn.btn--red {
  background: #e74c3c;
}

.btn.btn--purple {
  background: #9b59b6;
}

.btn.btn--black {
  background: #34495e;
}

.btn.btn--white {
  background: #ecf0f1;
  color:#34495E;
}

.btn.btn--yellow {
  background: #f1c40f;
}

.btn.btn--orange {
  background: #e67e22;
}

.btn.btn--disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn.btn--active {
  position: relative;
  border-bottom: 0;
  top: 1px;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.55);
}
.btn.btn--disabled:active{
  top:inherit
}
.btn.btn--disabled:hover{
 background-image:inherit
}
.btn.btn--active.border{
  box-shadow:inset 0 0 .5em rgba(0,0,0,.15),inset 0 0 0 1px rgba(0,0,0,.05);
}
.btn.btn--border {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.btn.btn--active.btn--border{
  box-shadow:inset 0 0 .5em rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.5);
}
.btn.btn--border {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.btn.btn--regular {
  font-size: 1.2em;
}

.btn.btn--large {
  font-size: 1.56em;
  padding: 0 .4em;
}

.btn.btn--larger {
  font-size: 2.028em;
  padding: 0 .2em;
}

.btn.btn--shadow{
  box-shadow:1px 1px 0 #fff,2px 2px 0 rgba(0,0,0,.3);
}
.btn.btn--shadow:active{
  box-shadow:1px 1px 0 rgba(0,0,0,.4);
}

/* responsive */
@media (max-width: 767px) {
  .btn {
    width: 100%;
  }
}

.block{
  margin:.02em .4em
}