<div class="container">
<a href="#" class="btn-shine">PUSH ME</a>
</div>
<div class="container-02">
<a href="#" class="btn-shine is-pink">PUSH ME</a>
</div>
/* ここはコピーしなくてOK */
.container {
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #000;
}


/* ここから下がボタンのCSS */
.btn-shine {
  color: #FFF;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 45px;
  width: 200px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);
}

.btn-shine:hover {
  border-color: #FFF;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: transparent;
  outline-offset: 12px;
  text-shadow: 2px 2px 3px #000;
}


/* ここはコピーしなくてOK */
.container-02 {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #e00364;
}

/* ここから下がボタンのCSS */
.btn-shine.is-pink:hover {
  text-shadow: 2px 2px 3px #e00364;/* text-shadowを背景色に変更する*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.