Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Nov 21, 2016
Embed
What would you like to do?
luxury buttons
article
div.center
a.btn(href="#") individuals
a.btn(href="#") brokers
@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()
<link href="http://codepen.io/dbox/pen/rVZPKo" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment