これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons
Post on:2022年5月25日
sponsors
Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。
角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。
100 Modern CSS Buttons
100 Modern CSS Buttons -GitHub
100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。
ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソースであろうとクローズドソースであろうと、好きなように使用できます、とのことです。帰属は必要ありません。
ボタンは、シンプルなHTMLとCSSで実装されています。JavaScriptはなしです。右上のコピーボタンをクリックすると、簡単にコピペできます。
CSSアニメーションはシンプルなものから、ちょっと変わったものまで、いろいろ揃っています。
Over Fold -100 Modern CSS Buttons
たとえば、上記のボタンは「Over Fold」と呼ばれるものです。
ホバーまたはクリックすると、右下から左上にコーナーを移動して、背景が表示されるボタンです。下記のようにclip-pathをアニメーションさせています。
See the Pen
CSS Button, explained. by Eluda (@eludadev)
on CodePen.
HTMLは、下記の通りです。
|
1 2 3 4 5 |
<button class="btn-31"> <span class="text-container"> <span class="text">Button</span> </span> </button> |
CSSはアニメーションが少し複雑なので、コードは長めです。
|
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 |
.btn-31 { display: block; box-sizing: border-box; padding: 20px 45px; position: relative; text-transform: uppercase; border: 1px solid currentColor; } .btn-31:before { content: ""; z-index: -1; position: absolute; inset: 0; --progress: 100%; background: white; clip-path: polygon( 100% 0, var(--progress) var(--progress), 0 100%, 100% 100% ); transition: clip-path 0.2s; } .btn-31:hover:before { --progress: 0%; } .btn-31 .text-container { display: block; position: relative; overflow: hidden; } .btn-31 .text { display: block; position: relative; font-weight: 900; mix-blend-mode: difference; } .btn-31:hover .text { animation: move-up-alternate 0.3s forwards; will-change: transform; } @keyframes move-up-alternate { from { transform: translateY(0%); } 50% { transform: translateY(80%); } 51% { transform: translateY(-80%); } 100% { transform: translateY(0%); } } |
sponsors
