こんにちは。ささめまです。
憧れのsvg駆使しまくりのオシャレサイトに使いたいボタンをご紹介します。
（憧れのオシャサイトは近日中に参考作品としてご紹介します！）
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">
<svg width="280" height="40">
<rect x="0" y="0" rx="20" fill="none" width="280" height="40"></rect>
</svg>
<span>button</span>
</a>.button_link {
width: 280px;
height: 40px;
color: #81d8d0;
text-align: center;
text-decoration: none;
display: block;
position: relative;
}
.button_link svg {
position: absolute;
top: 0;
left: 0;
}
.button_link svg rect {
stroke: #81d8d0;
stroke-width: 1;
stroke-dasharray: 353, 0;
stroke-dashoffset: 0;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
.button_link:hover svg rect {
stroke-width: 1;
stroke-dasharray: 165, 543;
stroke-dashoffset: 370;
}design
マウスオーバーすると枠の線がくるんっと消えていき、下線のみ残るアニメーションです。
ん〜〜いいアニメーション…。
demoみたいに線細く作ると造型のアラが目立ってしまうので、太めにした方が合いそうです。
ボタンの大きさによってstroke-dasharrayとstroke-dashoffsetを調整してお使いください。
