cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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

            
          
!
            
              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);
    }
  }
}
            
          
!
999px
Loading ..................

Console