Buttons

Buttons.markdown

Buttons

Buttons made using HTML and LESS. Addable classes, comes in a variety of sizes and colors.

A Pen by Taeha on CodePen.

License.

index.html

<div class = "wrapper">
  <div class = "center">
    <div class = "button-wrap">
      <button class = "rad-button light flat">Primary Light Flat</button>
    </div>

    <div class = "button-wrap">
      <button class = "rad-button light gradient">Primary Light Graident</button>
    </div>

    <div class = "button-wrap">
      <button class = "rad-button dark flat">Primary Dark Flat</button>
    </div>

    <div class = "button-wrap">
      <button class = "rad-button dark gradient">Primary Dark Gradient</button>
    </div>
  </div>

  <div class = "center">
    <div class = "button-wrap">
      <button class = "rad-button static light flat">Static (won't move up)</button>
    </div>
    <div class = "button-wrap">
      <button class = "rad-button static dark flat">Static (won't move up)</button>
    </div>
  </div>

  <div class = "center">
    <div class = "button-wrap">
      <button class = "rad-button static small light flat">Small</button>
    </div>
    <div class = "button-wrap">
      <button class = "rad-button static small dark flat">Small</button>
    </div>
  </div>

  <div class = "center">
    <div class = "button-wrap">
      <button class = "rad-button xsmall light flat">xSmall Light Flat</button>
    </div>
      <div class = "button-wrap">
      <button class = "rad-button xsmall light gradient"> xSmall Light grad</button>
    </div>
      <div class = "button-wrap">
      <button class = "rad-button xsmall dark flat">xSmall Dark Flat</button>
    </div>
      <div class = "button-wrap">
      <button class = "rad-button xsmall dark gradient">xSmall Dark grad</button>
    </div>
  </div>

  <div class = "center">
    <div class = "button-wrap">
      <button class = "rad-button warning flat">Warning</button>
    </div>

    <div class = "button-wrap">
      <button class = "rad-button danger flat">Danger</button>
    </div>

    <div class = "button-wrap">
      <button class = "rad-button good flat">Good</button>
    </div>

    <div class = "button-wrap">
      <button class = "rad-button wwt flat">WWT</button>
    </div>
  </div>
</div><!--wrapper-->

style.css

body{
  background-color:#f0f0f0;
  
}
.wrapper{
  background-color:#FFF;
  margin:50px;
  padding:20px;
  box-shadow:0px 0px 20px rgba(0,0,0,0.1);
  
}
.center{
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  height:50px;
}


.button-wrap{
  margin-right: 25px;
}
.rad-button{
  white-space:nowrap;
  top:0px;
  border-radius:4px;
  position:relative;
  border:none;
  background:none;
  font-family: 'Roboto', sans-serif;
  width: 200px;
  height: 50px;
  cursor:pointer;
  transition:0.1s all ease;
  font-size : 16px;
  font-weight: 300;
  color:#777;
  border-bottom: 1px solid #ccc;
  box-shadow:0px 0px 0px 0px #B8B8B8;
  
  
  &.flat{
    background:#f0f0f0;
  }
  
  &.small{//flat small
    width:150px;
    height:35px;
    &:hover{

      top:-1px !important;
      height:36px !important;
    }
    &:active{
      top:0px !important;
      height:35px !important;
    }
  }
  
  &.xsmall{//flat xsmall
    width:100px;
    height:25px;
    font-size:10px;
    
    &:hover{
      border-bottom: 3px solid #ccc;
      top:0px;
      height:25px;
    }
    
    &:active{
      height:25px !important;
      border-bottom: 0px !important;
    }
  }
 
  
  &.gradient{
    background: #f0f0f0; /* Old browsers */
    background: -moz-linear-gradient(top,  #f0f0f0 0%, #e0e0e0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f0f0f0 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f0f0f0 0%,#e0e0e0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f0f0f0 0%,#e0e0e0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f0f0f0 0%,#e0e0e0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
  }
  
  &.dark{
    border-bottom: 1px solid #5e5e5e;
    color:#f5f5f5;    
    &.flat{
      background: #a1a1a1
    }
    
    &.gradient{
      background: #a1a1a1; /* Old browsers */
      background: -moz-linear-gradient(top,  #a1a1a1 0%, #848484 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1a1a1), color-stop(100%,#848484)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #a1a1a1 0%,#848484 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #a1a1a1 0%,#848484 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #a1a1a1 0%,#848484 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #a1a1a1 0%,#848484 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1a1a1', endColorstr='#848484',GradientType=0 ); /* IE6-9 */ 
    }
   
    &:hover{//dark hover
      background-color:#ababab;
      top:-2px;
      border-bottom: 4px solid #727272;
      height:52px;
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
      &.xsmall{//dark small
        border-bottom: 3px solid #727272;
        top:0px;
        height:25px;
      }
    }
    &:active{//dark active
      top:0px;
      height:50px;
      border: 1px solid #727272;
      background-color:#8e8e8e;
      box-shadow: inset 0px 0px 4px rgba(0,0,0,0.15);
    }
  }
  
  &:focus{
    outline:0;
  }
  
  &:hover{ //primary hover
    background-color:#f5f5f5;
    top:-2px;
    height:52px;
    border-bottom: 4px solid #ccc;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.15);
    &.static{
      top:0px;
      height:50px;
    }
  }
  
  &:active{//primary active
    top:0px;
    height:50px;
    border: 1px solid #ccc;
    background-color:#ededed;
    box-shadow: inset 0px 0px 4px rgba(0,0,0,0.15);
  }
  
  &.warning{
    background-color:#f3eac5;
    color:#bd8d32;
    border-bottom: 1px solid #bcb496;
    &:hover{
      background-color:#faf5df;
      top:-2px;
      border-bottom: 4px solid #bcb496;
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
    }
    &:active{
      top:0px;
      border: 1px solid #bcb496;
      background-color:#e6dcb5;
      box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
    }
  }
  
  &.danger{
    background-color:#e7a796;
    color:#7b5348;
    border-bottom: 1px solid #7b5348;
    &:hover{
      background-color:#f2beb1;
      top:-2px;
      border-bottom: 4px solid #7b5348;
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
    }
    &:active{
      top:0px;
      border: 1px solid #7b5348;
      background-color:#d69280;
      box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
    }
  }
  
  &.good{
    background-color:#b9e9ce;
    color:#759f87;
    border-bottom: 1px solid #759f87;
    &:hover{
      background-color:#caf3db;
      top:-2px;
      border-bottom: 4px solid #759f87;
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
    }
    &:active{
      top:0px;
      border: 1px solid #759f87;
      background-color:#a5dabc;
      box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
    }
  }
  
  &.wwt{
    background-color:#32699b;
    color:#DBE9F5;
    border-bottom: 1px solid #1A4164;
    &:hover{
      background-color:#427BAE ;
      top:-2px;
      border-bottom: 4px solid #1A4164;
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
    }
    &:active{
      top:0px;
      border: 1px solid #1A4164;
      background-color:#255988;
      box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
    }
  }
}