こんにちは。ささめまです。
ここ3年くらい細い線を多用したサイトがかっこいいなーと思ってて、時間があればいい感じの素材を探しています。
今度の案件でシンプル上品なイメージをリクエストされているので、情報収拾の成果が出せそうな予感がしております(ワクワク)
目星をつけていたホバーエフェクトの1つを紹介します。
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">button</a>.button_link {
width: 280px;
height: 40px;
color: #81d8d0;
text-align: center;
text-decoration: none;
display: inline-block;
position: relative;
}
.button_link:after, .button_link:before {
content: "";
border: 1px solid #81d8d0;
transition: transform 0.2s;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.button_link:after {
transform: translate(3px, 3px);
}
.button_link:before {
transform: translate(-3px, -3px);
}
.button_link:hover:after, .button_link:hover:before {
transform: translate(0);
}
design
線をずらして表示したボタンにカーソルを合わせると、シュッと1本線に重なります。おしゃれー！
いつか使いたいボタンアニメーションのひとつです！
使ったらこのブログでご報告しますね。
