CSSアニメーションを使ったボタンのアイデア＆サンプル集です。
コピペ後、配色をお好みの色に変更して、ご利用ください。
目次
基本のCSS
まずは基本となるCSSになります。
全てのボタンで共通となりますので、まずはこちらをコピーしてください。
基本2については、枠がないタイプのボタンのみ（ボタンサンプル6）のみで使用します。
フォントサイズや色は、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 |
/*基本*/ .btn_base{ margin-bottom: 1em; text-align:center; } .btn_base a{ display:inline-block; width:auto; font-size: 18px; padding: 0.7em 2em; transition: 0.4s; font-weight: bold; text-decoration: none; border-radius: 5px; box-shadow: 0px 3px 10px rgba(0,0,0, 0.4); } .btn_base a:hover{} /*基本2（テキストタイプのボタン）ボタンサンプル6以外は省略可*/ .btn_txt{ margin-bottom: 1em; text-align:center; } .btn_txt a{ display:inline-block; width:auto; font-size: 18px; padding: 0.7em 2em; transition: 0.4s; font-weight: bold; text-decoration: none; } .btn_txt a:hover{} |
１．ゆっくり色が変わるCSSボタン
|
1 2 3 4 5 6 7 |
<p class="btn_base btn-sample-1"> <a href="#">サンプルボタン1</a> </p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ボタンサンプル1 */ .btn-sample-1 a{ background:#174AED; color: #FFF; } .btn-sample-1 a:hover{ background: #EDBC11; } |
２．オンマウスで枠線のみ表示されるボタン
|
1 2 3 4 5 6 7 |
<p class="btn_base btn-sample-2"> <a href="#">サンプルボタン2</a> </p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* ボタンサンプル2 */ .btn-sample-2 a{ background:#174AED; border:3px solid #174AED; color: #FFF; } .btn-sample-2 a:hover{ background: #FFF; color: #174AED; } |
３．オンマウスで沈むボタン
|
1 2 3 4 5 6 7 |
<p class="btn_base btn-sample-3"> <a href="#">サンプルボタン3</a> </p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* ボタンサンプル3 */ .btn-sample-3 a{ transition: 0.2s; background: #174AED; color: #FFF; box-shadow: 0px 3px 10px rgba(0,0,0, 0.4); margin-bottom: 4px; } .btn-sample-3 a:hover{ margin-top: 4px; margin-bottom: 0px; box-shadow: 0px 1px 10px rgba(0,0,0, 0.4); } |
４．オンマウスで角丸からピン角になるボタン
|
1 2 3 4 5 6 7 |
<p class="btn_base btn-sample-4"> <a href="#">サンプルボタン4</a> </p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* ボタンサンプル4 */ .btn-sample-4 a{ background: #174AED; color: #FFF; outline: none; border-radius: 25px;/* pxで調整してください。100vhにすると時間調整が難しいです*/ transition:0.3s ease-out; } .btn-sample-4 a:hover{ border-radius: 0; } |
５．光が走るボタン
|
1 2 3 4 5 6 7 |
<p class="btn_base btn-sample-5"> <a href="#">サンプルボタン5</a> </p> |
|
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 |
/* ボタンサンプル5（光が走るボタン）*/ .btn-sample-5 a{ background: #174AED; color: #FFF; position: relative; overflow: hidden; } .btn-sample-5 a:hover{ background:#131CD3; } .btn-sample-5 a:after{ content: ""; position: absolute; top: -50%; left: -50%; width: 10%; height: 100%; background: #fff; transform: rotate(45deg); animation: btn5_reflect 3s ease-in infinite; } @keyframes btn5_reflect{ 0%,70%{ transform: rotate(45deg) scale(0); opacity: 0.5; } 100%{ transform: rotate(45deg) scale(100); opacity: 0; } } |
６．オンマウスで下線が走るボタン
|
1 2 3 4 5 6 7 |
<p class="btn_txt btn-sample-6"> <a href="#">サンプルボタン6</a> </p> |
|
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 |
/* ボタンサンプル6（下線が走るボタン）*/ .btn-sample-6 a{ position:relative; color: #333; } .btn-sample-6 a:hover{} .btn-sample-6 a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #333; transform: scale(0, 1); transform-origin: right center 0; transition: transform 0.3s ease-in-out; } .btn-sample-6 a:hover::before{ transform: scale(1, 1); transform-origin: left center 0; } |
基本CSSは .btn_txt を使用してください。
７．オンマウスでグラデーションが反転するボタン
|
1 2 3 4 5 6 7 |
<p class="btn_base btn-sample-7"> <a href="#">サンプルボタン7</a> </p> |
|
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 |
/* ボタンサンプル7（グラデーションを反転）*/ .btn-sample-7 a{ color: #FFF; position:relative; } .btn-sample-7 a:before, .btn-sample-7 a:after{ content:""; width:100%; height:100%; position:absolute; top: 0; left:0; } .btn-sample-7 a:before{ z-index:-1; transition:0.7s; background:linear-gradient(#375de8,#0626d8); } .btn-sample-7 a:after{ z-index:-2; left:0; background:linear-gradient(#0626d8,#375de8); } .btn-sample-7 a:hover:before{ opacity:0; } |
７．オンマウスでグラデーションが反転するボタン
|
1 2 3 4 5 6 7 |
<p class="btn_base btn-sample-8"> <a href="#">サンプルボタン8</a> </p> |
|
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 65 66 |
<!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:heading --> <h2>７．グラデーションが反転するボタン</h2> <!-- /wp:heading --> <!-- wp:html --> <p class="btn_base btn-sample-1"> <a href="#">サンプルボタン1</a> </p> <!-- /wp:html --> <!-- wp:ub/tabbed-content-block {"blockID":"887cf2f0-8416-4ca5-bfba-e2f4de4eb498","activeControl":"tab-title-1","activeTab":1,"tabsTitle":["HTML","CSS"],"tabsTitleAlignment":["left","left"],"tabsAnchor":[]} --> <!-- wp:ub/tab-block {"isActive":false,"parentID":"887cf2f0-8416-4ca5-bfba-e2f4de4eb498"} --> <!-- wp:paragraph {"placeholder":" "} --> <p></p> <!-- /wp:paragraph --> <!-- wp:urvanov-syntax-highlighter/code-block --> <div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="lang:default decode:true " ><p class="btn_base btn-sample-1"> <a href="#">サンプルボタン1</a> </p></pre></div> <!-- /wp:urvanov-syntax-highlighter/code-block --> <!-- /wp:ub/tab-block --> <!-- wp:ub/tab-block {"index":1,"parentID":"887cf2f0-8416-4ca5-bfba-e2f4de4eb498"} --> <!-- wp:paragraph {"placeholder":" "} --> <p></p> <!-- /wp:paragraph --> <!-- wp:urvanov-syntax-highlighter/code-block --> <div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="lang:default decode:true " >/* ボタンサンプル7（グラデーションを反転）*/ .btn-sample-7 a{ color: #FFF; position:relative; } .btn-sample-7 a:before, .btn-sample-7 a:after{ content:""; width:100%; height:100%; position:absolute; top: 0; left:0; } .btn-sample-7 a:before{ z-index:-1; transition:0.7s; background:linear-gradient(#375de8,#0626d8); } .btn-sample-7 a:after{ z-index:-2; left:0; background:linear-gradient(#0626d8,#375de8); } .btn-sample-7 a:hover:before{ opacity:0; }</pre></div> <!-- /wp:urvanov-syntax-highlighter/code-block --> <!-- /wp:ub/tab-block --> <!-- /wp:ub/tabbed-content-block --></div> <!-- /wp:group --> |
