A Pen by Kaushalya Mandaliya.

index.html

<div class="simple-and-cool-button clr-red">Red</div>
<div class="simple-and-cool-button clr-green">Green</div>
<div class="simple-and-cool-button clr-blue">Blue</div>
<div class="simple-and-cool-button clr-black">Black</div>

script.js

// Playing around colors and buttons :)

Simple-and-Cool-buttons.markdown

Simple and Cool buttons

Playing with buttons and colors... :)

A Pen by Kaushalya Mandaliya on CodePen.

License.

style.scss

@import "compass/css3";
.simple-and-cool-button {
  border: 0.1em solid;
  cursor: pointer;
  display: inline-block;
  font-family: 'Nunito', sans-serif; // 'Nunito' Cool Font... :D
  font-size: 1.3em;
  margin: 0.5em;
  padding: 1em;
  text-align: center;
  width: 7em;
  
  // @include section
  @include border-radius(0.5em);
  @include transition(0.3s all ease-in-out);  
  
  // Colors
  &.clr-red {    
    background: white;
    color: red;    
    
    &:hover {
      background: red;
      color: white;
    }
  }
  
  &.clr-green {    
    background: white;
    color: green;    
    
    &:hover {     
      background: green;    
      color: white;
    }
  }
  
  &.clr-blue {    
    background: white;
    color: blue;    
    
    &:hover {      
      background: blue;    
      color: white;
    }
  }
  
  &.clr-black {    
    background: white;
    color: black;    
    
    &:hover {
      background: black;   
      color: white;
    }
  }
  
}