File: D:/HostingSpaces/SBogers96/smilefotografie.nl/wwwroot/css/partials/_buttons.sass
.button
display: inline-block
position: relative
left: -2px
box-sizing: content-box
padding: 0 15px
height: 40px
line-height: 40px
border: 2px solid #000
background: #fff
color: #000
font-size: .818182em
font-weight: 700
cursor: pointer
+transition(all 150ms ease-out)
+respond-to(small)
height: 30px
line-height: 30px
&:hover
border: 2px solid #fff
background: #000
color: #fff
&.black
border: 2px solid #fff
background: #000
color: #fff
&:hover
border: 2px solid #000
background: #fff
color: #000
&.blue
border: 2px solid #fff
background: $blue
color: #fff
&:hover
border: 2px solid $blue
background: #fff
color: $blue
&.on-grey
border: 2px solid $background
background: #000
color: #fff
&:hover
border: 2px solid #000
background: $background
color: #000
// White button black arrow
&.arrow
padding-right: 35px
&:after
content: ''
display: block
+position(absolute, 50% 12px null null)
margin-top: -4px
+sprite(14px, 10px, -200px -10px)
// On hover white arrow
&:hover
&:after
+sprite(14px, 10px, -220px -10px)
// Black arrow to the left
&.back
padding-right: 15px
padding-left: 35px
&:after
left: 12px
right: auto
background-position: -200px -25px
// On hover white arrow
&:hover
&:after
+sprite(14px, 10px, -220px -25px)
// Black button white arrow
&.black
&:after
+sprite(14px, 10px, -220px -10px)
// On hover: black arrow
&:hover
&:after
+sprite(14px, 10px, -200px -10px)
// Black button white arrow to the left
&.black.back
&:after
+sprite(14px, 10px, -220px -25px)
// On hover: black arrow
&:hover
&:after
+sprite(14px, 10px, -200px -25px)
&[type="button"],
&[type="submit"]
//border: none
+roboto
cursor: pointer