Всем доброго дня!
Друзья, не могу понять, почему не срабатывют эффекты для кнопки: display: none; &:hover; &:focus и &:active
Задумка такая:
При наведении на блок, появляется кнопка, при наведении на кнопку она светлеет, при нажатии на кнопку она темнеет и продавливается.
вот код SASS:
.items
max-width: 1000px
margin: 50px auto 0
.item
float: left
width: 100%
height: em(400px)
box-shadow: 0 0 10px rgba(100,100,100,0.3)
position: relative
padding: 70px 10px 10px
text-align: center
box-sizing: border-box
button
.sbottom
display: none
display: inline-block
border: none
background-color: #F39F18
color: #fff
font-size: em(10px)
letter-spacing: 1px
text-transform: uppercase
padding: 4px 24px
border-radius: 7px
box-shadow: 0 4px 0 #986107
transition: all .15s ease
&:hover, &:focus
color: #fff
text-decoration: none
&:hover
background-color: #FF9F06
&:active
background-color: #986107
transform: translateY(3px)
Вот код html:
<div class="col-lg-3">
<div class="items">
<div class="item item_1">
<h3>Заголовок блока</h3>
<p>Текст блока</p>
<div class="button">
<a href="#" class="sbottom">заказать услугу</a>
</div>
</div>
</div>
</div>
На всякий случай (не уверен, но возможно будет важно) вот код SASS всего блока:
.items
max-width: 1000px
margin: 50px auto 0
.item
float: left
width: 100%
height: em(400px)
box-shadow: 0 0 10px rgba(100,100,100,0.3)
position: relative
padding: 70px 10px 10px
text-align: center
box-sizing: border-box
button
.sbottom
display: none
display: inline-block
border: none
background-color: #F39F18
color: #fff
font-size: em(10px)
letter-spacing: 1px
text-transform: uppercase
padding: 4px 24px
border-radius: 7px
box-shadow: 0 4px 0 #986107
transition: all .15s ease
&:hover, &:focus
color: #fff
text-decoration: none
&:hover
background-color: #FF9F06
&:active
background-color: #986107
transform: translateY(3px)
&:after
content: ''
position: absolute
top: 20px
left: 0
right: 0
margin: auto
width: 46px
height: 46px
background: url(http://www.sgs66.ru/img/ico-lp-offer-46px.png) no-repeat
&:before
content: ''
position: absolute
left: 7px
top: 7px
bottom: 7px
right: 7px
border: 2px solid #32d3ff
&_1
&:after
background-position: 0 0
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg)
&:after
background-position: right 0
&_2
&:after
background-position: 0 -46px
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg)
&:after
background-position: right -46px
&_3
&:after
background-position: 0 -92px
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg)
&:after
background-position: right -92px
&_4
&:after
background-position: 0 -138px
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg)
&:after
background-position: right -138px
&:hover
color: #fff
button
display: inline-block
&:before
border-color: #fff
Простой
