File: D:/HostingSpaces/SBogers14/coeveringmatrijzen.nl/wwwroot/css/modules/_buttons.sass
// Orange
.btn-holder
width: 100%
text-align: center
.btn
display: inline-block
position: relative
height: 50px
margin: 0 auto
padding: 0 60px 0 20px
line-height: 50px
background: #EEA905
color: #fff
font-family: 'DIN Next W02 Regular',arial, sans-serif
border-radius: 5px
cursor: pointer
-webkit-box-shadow: inset 0px -2px 0px 0px rgba(208,149,0,1)
-moz-box-shadow: inset 0px -2px 0px 0px rgba(208,149,0,1)
box-shadow: inset 0px -2px 0px 0px rgba(208,149,0,1)gem
&::after
content: ''
display: block
position: absolute
top: 50%
right: 20px
margin-top: -10px
height: 20px
width: 20px
background: url("/images/structure/coevering_sprite.png") no-repeat scroll -330px -10px transparent
&:hover
background: #F09600
&.next
margin-top: 80px
.btn.green
display: block
background: #8DB9C6
height: 80px
line-height: 80px
padding-left: 80px
color: rgba(255, 255, 255, .8)
+transition(color 200ms ease-out)
white-space: nowrap
-webkit-box-shadow: none
-moz-box-shadow: none
box-shadow: none
+respond-to(handheld)
padding-left: 20px
&:before
content: ''
position: absolute
top: 20px
left: 20px
display: block
width: 40px
height: 40px
background: url("/images/structure/coevering_sprite.png") no-repeat
opacity: .6
+transition(opacity 200ms ease-out)
+respond-to(handheld)
display: none
&:hover
color: #fff
&:before
opacity: 1
&.phone
margin-bottom: 30px
&:before
background-position: -320px -160px
&.email
&:before
background-position: -370px -160px
.target
position: absolute
top: 21px
left: 21px
z-index: 50
width: 40px
height: 40px
&.phone
position: relative
z-index: 2
.over
.start
background-position: -110px -140px
.out
.start
background-position: -110px -50px
&.mail
.over
.start
background-position: -200px -140px
.out
.start
background-position: -200px -50px
a.btnOrange
display: inline-block
position: relative
margin: 30px 0 0 0
height: 60px
cursor: pointer
.btnLabel
display: block
float: left
padding-top: 23px
height: 37px
color: #fff
font-size: .928571429em
text-transform: uppercase
line-height: 1em
.start, .end
display: block
float: left
height: 60px
background: no-repeat url('/images/structure/coevering_sprite.png')
.start
width: 30px
.end
width: 50px
.over
position: absolute
top: 0
left: 0
z-index: 10
opacity: 0
filter: alpha(opacity=0)
.start
background-position: -10px -110px
.end
background-position: -50px -110px
.btnLabel
background: repeat-x url('/images/structure/orangeBtn_over.jpg')
.out
position: relative
.start
background-position: -10px -40px
.end
background-position: -50px -40px
.btnLabel
background: repeat-x url('/images/structure/orangeBtn_out.jpg')
// Green
a.btnGreen
display: inline-block
z-index: 0
position: relative
margin: 0 0 10px 0
width: 340px
height: 80px
cursor: pointer
.over
position: absolute
top: 0
left: 0
z-index: 10
opacity: 0
filter: alpha(opacity=0)
.btnLabel
background: repeat-x url('/images/structure/btnGreen_over.jpg')
.out
position: relative
.btnLabel
background: repeat-x url('/images/structure/btnGreen_out.jpg')
.start, .end
display: block
float: left
height: 80px
background: no-repeat url('/images/structure/coevering_sprite.png')
.start
width: 80px
.end
width: 40px
.btnLabel
display: block
float: left
padding: 32px 0 0 0
width: 220px
height: 48px
color: #fff
font-size: 0.95em
font-family: 'DIN Next W02 Regular',arial, sans-serif
line-height: 1em
.out .end, .over .end
background-position: -290px -50px
.target
position: absolute
top: 21px
left: 21px
z-index: 50
width: 40px
height: 40px
&.phone
position: relative
z-index: 2
.over
.start
background-position: -110px -140px
.out
.start
background-position: -110px -50px
&.mail
.over
.start
background-position: -200px -140px
.out
.start
background-position: -200px -50px
.detail
display: block
position: absolute
bottom: -35px
left: 50%
z-index: 60
padding: 15px
height: 10px
background: #56565A
color: #fff
line-height: 0.5em
white-space: nowrap
opacity: 0
filter: alpha(opacity=0)
.arrow
display: block
position: absolute
top: -10px
left: 50%
margin-left: -8px
width: 16px
height: 10px
background: url('/images/structure/coevering_sprite.png') -460px -10px
.label
display: block
position: relative
z-index: 100