CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。
デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。
ボタンサンプルHTML
<a href="#" class="demo_btn"><span class="demo_gradient"></span>ボタンサンプル</a>
spanの要素が文字の背景となり、グラデーションの色を斜めにつけています。
アニメーションの動きは、縦長の長方形になっているspanを上下に移動させています。
CSS
.demo_btn{
display: block;
width: 200px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
text-align: center;
box-sizing: border-box;
font-size: 18px;
padding: 26px;
border: 1px solid #DDD;
color: #1a1a1a;
transition: all 0.5s ease-in-out 0s;
}
.demo_btn .demo_gradient {
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 800%;
bottom: auto;
margin: auto;
z-index: -1;
background: #6086c1;
background: linear-gradient(45deg, #333 0%, #000 49%, #FFF 50%, #EEE 100%);
transition: all 0.5s ease-in-out 0s;
transform: translateY(0%);
}
.demo_btn:hover,
.demo_btn:focus {
text-decoration: none;
border: 1px solid #72b4d3;
color:#FFF;
}
.demo_btn:hover .demo_gradient,
.demo_btn:focus .demo_gradient {
transform: translateY(-85%);
}
spanが z-index = -1 で、overflow ではみ出た部分が隠れています。
位置や色を調整するといろんなバリエーションを作ることができます。
