<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を背景色に変更する*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.