luxury buttons

index.jade

article
  div.center
    a.btn(href="#") individuals
    a.btn(href="#") brokers    

luxury-buttons.markdown

luxury buttons

A Pen by Daniel Box on CodePen.

License.

style.stylus

@import 'nib'
@import 'jeet'


$gold1 = rgba(#dfbe6a, .8)
$gold2 = rgba(#926f34, .8)
    
.btn
  inline-block()
  background: transparent

  upcase()
  normal()
  font-size: -rem(10px)
  letter-spacing: .3em
  color: rgba($gold1, .7)
  border-radius: 0
  padding: 18px 80px 20px
  transition: all .7s ease-out
  background: linear-gradient(270deg, $gold1, $gold2, rgba(black, 0), rgba(black, 0));
  background-position: 1% 50%  
  background-size: 300% 300%;
  text-decoration: none
  margin: -rem(10px)
  border: none
  border: 1px solid rgba($gold1, .3)  
  
  &:hover   
    color: white
    border: 1px solid rgba($gold1, 0)
    color: $white
    background-position: 99% 50%

  
body
  background: #231f20
  color: #fff
  font-family: "Helvetica Neue", Helvetica, Arials, sans
    
article
  height: 100vh
div.center
  text-align: center
  center(800px)
  vertically-align()
  

styles

<link href="http://codepen.io/dbox/pen/rVZPKo" rel="stylesheet" />