CSSで実装されたボタンのかわいい動きに思わずクリックしたくなってしまうCSSアニメーションの実装方法
Post on:2019年3月18日
sponsors
ボタンをクリックするためにホバーすると、ボタンがゆらゆら揺れるかわいいアニメーションに思わずクリックしたくなってしまうCSSアニメーションを紹介します。
ボタン自体だけでなく、文字が少し遅れて揺れるのもいいですね。
実際の動作は、下記でお楽しみください。
See the Pen
CSS button hover by Danil Goncharenko (@Danil89)
on CodePen.
HTML
HTMLは非常にシンプルです。
|
1 2 3 |
<button> <span>hover me</span> </button> |
CSS
ボタンなので、cursor: pointer;でカーソルをポインターにし、@keyframesでアニメーションを定義します。span内のテキストはタイミングをずらすのがポイントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
button { position: relative; outline: none; text-decoration: none; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; text-transform: uppercase; height: 60px; width: 210px; opacity: 1; background-color: #ffffff; border: 1px solid rgba(22, 76, 167, 0.6); } button span { color: #164ca7; font-size: 12px; font-weight: 500; letter-spacing: 0.7px; } button:hover { animation: rotate 0.7s ease-in-out both; } button:hover span { animation: storm 0.7s ease-in-out both; animation-delay: 0.06s; } @keyframes rotate { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(3deg) translate3d(0, 0, 0); } 50% { transform: rotate(-3deg) translate3d(0, 0, 0); } 75% { transform: rotate(1deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @keyframes storm { 0% { transform: translate3d(0, 0, 0) translateZ(0); } 25% { transform: translate3d(4px, 0, 0) translateZ(0); } 50% { transform: translate3d(-3px, 0, 0) translateZ(0); } 75% { transform: translate3d(2px, 0, 0) translateZ(0); } 100% { transform: translate3d(0, 0, 0) translateZ(0); } } |
sponsors
