ページ内には広告が含まれます広告ポリシー
角丸、光、グラデーション、矢印、立体アニメーションなどを使ったボタンデザインを紹介します。リンクや申し込み、次のページへ進む導線に使いやすい作例を集めました。
コピペで使えるCSSボタンデザイン
CSSデザインレシピ集では、CodePenからHTMLとCSSをコピーして使えるデザインを集めました。
ボタンのデザインは、サンプルのHTMLを参考に、表示する文字やリンク先を入れ替え、CSSを加えるだけで変更できます。通常のHTMLサイトとWordPressのどちらでも使えるので、サイト内のリンクや申し込みページへの導線に取り入れてください。
ボタンデザインの使い方
使いたいデザインが見つかったら、見本のHTMLからボタン部分を、CSSからボタンに使われている部分をコピーします。HTMLへ付いているクラス名と、CSSのクラス名が同じになるように使います。
各デザインはCodePenで表示しています。HTMLとCSSをクリックすると、コードが表示されます。
アレンジ例は、CSSをベースに説明しています。CSS欄に「SCSS」や「Less」と表示される作例は、CSSのメニューにある「View Compiled」を開くと、通常のCSSコードが表示されます。
サイトにもともとCSSや余白が設定されている場合は、見本と少し違う表示になることがあります。CSSを追加したあとは、実際のページで前後の文章との間隔も確認しておくと安心です。
CSSボタンデザイン
影が広がる丸いボタン
カーソルを重ねると、丸いボタンが回転しながら周囲へ影が広がります。HTMLはボタン要素1つだけなので、丸いアイコンボタンとして取り入れやすいデザインです。
.plusのbackground: #ed1c5bを変えるとボタンの背景色が、width: 80pxとheight: 80pxを変えると大きさが変わります。カーソルを重ねたときに広がる影は、.plus:hoverにある3つのbox-shadowから変更できます。
矢印が現れるボタン
カーソルを重ねると文字が左へ移動し、右側から矢印が現れるデザインです。次のページへ進むリンクや、詳細ページを開くボタンに使いやすくなっています。
buttonのbackground-color: #5ca1e1を変えるとボタンの背景色が変わります。矢印はbutton::afterのcontent: "»"で表示され、動く速さはtransition: 0.5sから変更できます。
グラデーションが流れるボタン
カーソルを重ねると、ボタンのグラデーションが横へ流れるデザインです。配色を変えるだけでも雰囲気を調整しやすく、申し込みや案内用のボタンにも使えます。
.popup-buttonのbackground-imageにある3色を変えるとグラデーションの配色が変わります。色が流れる範囲はbackground-size: 200% auto、移動後の位置は.popup-button:hoverのbackground-position: right centerから変更できます。
光が横切るボタン
カーソルを重ねると、ボタンの上を斜めの光が横切ります。通常のボタンへ、短いアニメーションを加えたい場合に使いやすいデザインです。
buttonのbackground-color: #FFF45Fを変えるとボタンの背景色が変わります。光の色は.sheen::afterのlinear-gradient、横切る速さは.sheen:hover::afterのanimation: sheen 1s forwardsから変更できます。
周囲が光るネオンボタン
カーソルを重ねると、文字と枠線の色でボタン全体が光るデザインです。暗い背景のページや、特に目立たせたいボタンに合います。
:rootの--clr-neonを変えると文字・枠線・光の色が、--clr-bgを変えると背景色が変わります。通常時の光は.neon-buttonのbox-shadow、カーソルを重ねたときの光は.neon-button::afterから変更できます。
グラデーションの枠が光るボタン
ボタンの周囲をグラデーションが流れ、カーソルを重ねると光がぼやけて広がります。背景の暗いページで、ボタンを大きく目立たせたい場合に合います。
.button-bgのlinear-gradientにある4色を変えると枠線のグラデーションが、animation: AnimateBorder 4s ease infiniteを変えると色が流れる速さが変わります。カーソルを重ねたときの光の広がりは、.button-wrapper:hover .button-bgのfilter: blur(10px)から変更できます。
枠線が順番に描かれるボタン
ボタンの四辺を光が順番に移動し、枠線が描かれているように見えるデザインです。通常の枠線よりも動きを目立たせたいボタンに使えます。
四辺の線は、.subscribe-animated-btn span:nth-child(1)からspan:nth-child(4)までで作られています。上下の線にあるheight: 3pxと左右の線にあるwidth: 3pxを変えると枠線の太さが、animation: animate1 6s linear infiniteなどの6sを変えると動く速さが変わります。
立体的に回転するボタン
カーソルを重ねると、四角いボタンが奥行きを保ったまま一回転します。4つの面をHTMLのspanで作り、CSSの3D変形で動かしています。
a:hoverのrotateX(360deg)を変えるとボタンが回転する角度が、aのtransition: 4sを変えると回転する速さが変わります。回転中の背景色はa:hover spanのbackground: rgba(3, 169, 244, 0.8)から変更できます。
まとめ
ボタンは、背景色や形を変えるだけでも印象が変わり、光や矢印の動きを加えるとクリックできる場所がさらに伝わりやすくなります。
最初は影が広がる丸いボタンや矢印が現れるボタンなど、HTMLとCSSが短い作例から試し、サイトの色やボタンを置く場所に合わせて調整してください。
