Не срабатывают эффекты: display: none; &:hover; &:focus и &:active почему?

Question

[mUchenik]

Всем доброго дня!
Друзья, не могу понять, почему не срабатывют эффекты для кнопки: 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

Answer 1

[Андрей Б.]

Это из-за before, который перекрывает все. Переделал прошлый вариант на outline codepen.io/anon/pen/RrPLeR?editors=110
Либо можете указать для before свойство pointer-events