<!-- Beyaz Buton -->
<div id="bg-blue">
    <a class="btn-ghost btn-white btn-align" href="#">
      CMF Duyarlı Buton
    </a>
</div>
<!-- Mavi Buton-->
<div id="bg-gray">
  <a class="btn-ghost btn-blue btn-align" href="#">
    CMF Duyarlı Buton
  </a>
</div>

*, *:after, *:before {
    box-sizing: border-box;
}

html { font-size: 62.5%; }
body { margin: 0; padding: 0; }

/* butonlar */

.btn-align { position: relative; top: 40%; }
.btn-ghost {
  display: block;
  width: 340px; width: 34rem;
  height: 66px; height: 6.6rem;
  font: 700 20px/66px Helvetica, Arial, sans-serif; font: 2.0rem/6.6rem;
  letter-spacing: 0.01rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .16s ease;
  margin: 0 auto;
}
.btn-blue  { color: #06c; border: 2px solid #06c; }
.btn-blue:hover, .btn-blue:active, .btn-blue:focus  {
  color: #fff;
  background-color: #06c;
  border: 2px solid #06c;
}
.btn-white { color: #fff; border: 2px solid #fff; }
.btn-white:hover, .btn-white:active, .btn-white:focus  {
  color: #06c;
  background-color: #fff;
  border: 2px solid #fff;
}

@media screen and (max-width: 420px) { 
  .btn-ghost {
    width: 290px; width: 29.0rem;
    height: 50px; height: 5.0rem;
    font-size: 16px; font-size: 1.6rem;
    line-height: 50px; line-height: 5.0rem;
  }
}

/* Arkaplan */

div#bg-blue { background-color: #06c; height: 50vh; }
div#bg-gray { background-color: #eee; height: 50vh; }