Effects not working: display: none; &:hover; &:focus and &:active why?

Question

Sass

Good day everyone!
Friends, I can not understand why the effects for the button do not work: display: none; &:hover; &:focus and &:active
The idea is this:
When you hover over the block, a button appears, when you hover over the button, it brightens, when you click on the button, it darkens and pushes through.
here is the SASS code:

.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)

Here is the html code:

<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>

Just in case (not sure, but maybe important) here is the SASS code of the entire block:

.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

It's because of the before which overlaps everything. I changed the previous version to outline codepen.io/anon/pen/RrPLeR?editors=110
Or you can set the pointer-events property for before