Button

button.markdown

Button

css classes for buttons. supports both and

A Pen by jrswgtr on CodePen.

License.

index.html

<a href="#" class="button indigo icon">button</a>
<button class="button indigo icon">
button
</button>
<pre>

</pre>

style.scss

.button {
  display: inline-block;
  position: relative;
  font-family: sans;
  font-weight: 600;
  font-size: 18px;
  padding: 0 60px;
  //height: 60px;
  line-height: 60px;
  text-decoration: none;
  border: 5px solid;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s;
  //overflow: hidden;
  &.indigo {
    color: #fff;
    background-color: #1A237E;
    border-color: #1A237E;
    &:hover {
      color: #1A237E;
      background-color: #fff;
    }  
  }
  &.icon {
      &:after {
          position: absolute;
          right: 10px;
          bottom: 0;
          content: '>';
          font-size: 25px;
      }
      &:hover {
          transform: rotate(90);    
      }
  }
}