こんにちは。ささめまです。
最近制作開始した細い線の多いサイトに使いたいなーと思っているボタンをご紹介します。
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">button</a>.button_link {
width: 280px;
height: 40px;
color: #81d8d0;
text-align: center;
text-decoration: none;
display: block;
position: relative;
}
.button_link::after, .button_link::before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
border: 1px solid;
transition: all 0.6s ease;
border-radius: 2px;
}
.button_link::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: #81d8d0;
border-right-color: #81d8d0;
}
.button_link::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: #81d8d0;
border-left-color: #81d8d0;
}
.button_link:hover:after, .button_link:hover:before {
border-bottom-color: #81d8d0;
border-right-color: #81d8d0;
border-top-color: #81d8d0;
border-left-color: #81d8d0;
width: calc(100% - 4px);
height: calc(100% - 4px);
}design
鉤括弧風の飾りに囲まれたボタンにカーソルを合わせると、飾りがひゅーんと伸びて二重の囲い線になります。
以前ご紹介したマウスオーバーで二重線が一本に揃うオシャレアニメーションボタンのアニメーション発火前と同じデザインですね笑
こういうデザインだーい好き！
今後も思いついたら書き残します。
