こんにちは。ささめまです。
仕事に役立つかなと思ってcssや参考作品を集めていたこのブログが実際に仕事で役立って、えも言われぬ達成感を感じています。略してエモい。
今回は矢印がふわっとにゅっと出てくるボタンをご紹介します。
＼ コピペでそのまま使えます ／
demo
code
<a href="" class="button_link">
<span>
Hover me
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36.1 25.8" enable-background="new 0 0 36.1 25.8" xml:space="preserve"><g><line fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line><polyline fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7 "></polyline></g></svg>
</span>
</a>.button_link {
color: #ffffff;
background-color: #81d8d0;
display: inline-block;
position: relative;
transition: background-color 300ms ease-out;
}
.button_link span {
display: inline-block;
position: relative;
transition: all 300ms ease-out;
will-change: transform;
}
.button_link:hover span {
transform: translate3d(-1rem, 0, 0);
}
.button_link svg {
position: absolute;
width: 1.1em;
right: 0px;
right: 0rem;
opacity: 0;
top: 50%;
transform: translateY(-50%);
transition: all 300ms ease-out;
will-change: right, opacity;
stroke-width: 5;
stroke-color: transparent;
}
.button_link:hover svg {
opacity: 1;
right: -3rem;
}design
マウスオーバーすると文字が左にずれて、右側に矢印がしゅっと現れるボタンです。
動きが滑らかで気持ちいいので何度でもマウスオーバーしたくなるデザインだったのでご紹介しました。
svg、軽いし綺麗に描画できるしいいですよね。お友達になりたい。
ではでは
