CSS Opacity Transitions on :active elements affect other elements

Question

I made a simple webpage that consists of a few buttons (the receive quote and navigation buttons) which transitions to an opacity of 0.5 when pressed. But whenever I press any one of those buttons, the turquoise text at the middle of the page flickers ("Pixel perfect websites...").

I used a span for that turquoise text, did that affect it? I'm pretty new to HTML/CSS, so bear with me if my code looks terrible, or if I'm not following the best HTML/CSS practices. If possible, please tell me, apart from the flickering problem, if my code can be made better, as I really want to know how it can be further improved :D

My webpage on CodePen: http://codepen.io/optixal/pen/VvXGLz

HTML Body:

<div class="block head">
  <div class="container">
    <h1>Optixal Labs</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<div class="block foot">
  <div class="container">
    <p>Premium Website Development Service
      <br/><span class="highlight">Pixel perfect websites made with the latest HTML5 and CSS3 standards</span>
      <br/>
      <button>Get a free quote</button>
    </p>
  </div>
</div>
<div class="block desc">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet orci non massa placerat ornare id ac augue. Etiam sed sem luctus, malesuada lorem sit amet, ullamcorper enim. Quisque blandit tincidunt ultricies. In porttitor suscipit dui.
      Sed at mollis orci. Donec at sem et metus varius placerat non eget elit. In porta nisi vitae sem sodales molestie.
    </p>
  </div>
</div>

CSS:

@import url(https://fonts.googleapis.com/css?family=Roboto:100,400,300);

/*
pri-colour: #699191;
sec-colour: #437575;
hil-colour: turquoise;
*/

/* Base CSS */
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  font-family: Roboto, Helvetica, Arial;
  color: white;
}

html, body {
  margin: 0;
  padding: 0;
}

.block {
  background-color: #1A1A1A;
  width: 100%;
  min-width: 750px;
}

.container {
  margin: 0 auto;
  max-width: 1080px;
  position: relative;
  padding: 20px 40px;
}

/* Header */
h1 {
  font-size: 3em;
  font-weight: 100;
  text-transform: uppercase;
  margin: 10px auto;
}

/* Navigation */
ul {
  list-style-type: none;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 33px;
}

li {
  float: left;
}

a:link, a:visited {
  color: white;
  display: block;
  width: 110px;
  font-size: .9em;
  text-align: center;
  font-weight: 300;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .25s;
}

a:hover {
  color: turquoise;
}

a:active {
  opacity: .5;
}

/* Footer */
.foot {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url("https://c1.staticflickr.com/9/8166/7637076872_fcb6fcdaa8_b.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 129.5px 0;
}

.foot p {
  font-size: 2em;
  font-weight: 100;
  text-align: center;
  margin: 0;
}

.highlight {
  color: turquoise;
  font-size: .395em;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  top: -13px;

}

button {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  font-size: .3em;
  font-weight: 300;
  letter-spacing: 2px;
  outline: none;
  padding: 4px 10px;
  text-transform: uppercase;
  transition: all .25s;
  position: relative;
  bottom: -8px;
}

button:hover {
  background-color: #fff;
  box-shadow: 0 0 4px #fff;
  color: #0d0d0d;
}

button:active {
  opacity: .5;
}

/* Description */
.desc p {
  font-size: 1.2em;
  font-weight: 300;
  opacity: .87;
  text-align: justify;
  margin: 20px 0;
}

Thank you!