CSSのみ!可愛い!おしゃれ!ボタンホバーデザイン30選[コピペOK]
ぱりぴ研修生

ボタンのホバー時の動き方。指定があればいいけど、コーダーさん側でいい感じに。ってないことも多い。どうしてる?

パリぴ

実際に実装するか。は置いといて。うちの好きなホバーデザイン30選作ったからお気に入り見つけていってね!

今回はCSSだけで作れるものだけに絞ったよ!

See the Pen button hover by ここあ (@cocoadepon) on CodePen.

全部コピペして使用OKだよもちろん!似たようなデザインから色味変えたり、タイミング変えたり。形変えたり。わりかしCSSもそんなに複雑じゃないけど、おしゃれな可愛い。好き。なホバーデザイン集めてみました♪30個作るのにめちゃ時間かかったので、とりあえずホバーして遊んでくれるだけでも嬉しい←

ボタンとかのグラデーションを簡単に作れるグラデーションジェネレーターはこちら▼

https://cssgradient.io/

このジェネレーター直感的にグラデーション作っていけるし、CSSもしっかり生成してくれるからとってもオススメ!

てことで、30個全部の紹介はできないから、何個か特にお気に入りなの紹介していくねええええ!!!CSSいじる場所とかも紹介してくよおおお!

コピペの仕方!!!!!!

上に貼ってあるCODOPENからコピペする場所教えるよっ!脳死でコピペしても使えるんやけど、それだと全く同じものしか作れないし。サイトによってサイズや色味。配置する場所は絶対毎回変わるものだから、どこをいじっていけばどこが変わるのか自分でも色々試してみるのは必須だよ♪

HTML

  <!-- btn-1 -->
<div class="btn">
    <a class="custom-btn btn-1" href="/">Read More1</a>
  </div>

CodepenのHTMLの方にコメントアウトで<!– btn-○ –>ボタンの番号で区切ってあるので基本はそのコメントアウトの間をコピーでOK!自分でクラス名変えたり、差し込む場所によってはHTMLの組み方が変わる可能性もあるけれどそこは、臨機応変に♪最初のwrapperクラスのdivは、codepenの中でのスタイル当てるために作ってあるだけだからしかとしてOK!codepen内でクリックしても見やすくなるように、aタグ内のhref=””を全て抜いて記載してあるので、実装する際はここで実際にリンクで飛ばしたいURLなどちゃんと記述してから使ってくださいっっ!

CSS

.custom-btn{
 display:flex;                    /* 文字を中央寄せにする為のフレックス指定 */
 align-items:center;              /* 文字を縦方向中央寄せ */
 justify-content:center;          /* 文字を横方向中央寄せ */
 width: 130px;                    /* 横幅の指定 */
 height: 40px;                    /* 高さの指定 */
 color: #fff;                     /* 文字色の指定 */
 border-radius: 5px;              /* 角丸指定 */
 font-family: 'Lato', sans-serif; /* フォントファミリー指定 */
 font-weight: 500;                /* フォント太さ指定 */
 background: transparent;         /* 背景透過 */
 cursor: pointer;                 /* カーソル当てた時にポインターにする */
 transition: all 0.3s ease;       /* アニメーション変化指定 */
 position: relative;              /* :after :before要素をそれぞれのボタンで使うため */

 box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), /* ボタンの影をつけて立体的に見せてる */
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
}

今回全30個の共通クラスとして形を30個一定に保つ為に。aタグにcustom-btn」といった共通クラスbtn-○」といったそれぞれのボタンのクラスをつけてます!なので、コピペする際もこの「.custom-btn」部分の必要部分は使ってください♪コメントアウトで何をしているのか書いておきました!+それぞれのボタンの番号の部分で上書きしている指定もあるので、そこは調整してみてください♪

codepenの「.custom-btn」だけの指定だとこんな感じになってます▼

例えば

30個中唯一まともと言っても過言ではない。実装多め。横からにょろっと!No15.

See the Pen by ここあ (@cocoadepon) on CodePen.

わかりやすいように、「custom-btn」クラスは消して「btn-15」クラスだけにしました!これの場合は、元々「btn-15」クラスについていて「custom-btn」から上書きしていたものが「background」の背景色くらいだったので「custom-btn」クラスの「background: transparent;」以外を「btn-15」に入れてあげるだけでbtn-15のクラスだけで綺麗に表示できてます!この説明してる日本語が一番難しくなってる気がする!笑

とりあえずbtn-○と被っているプロパティは「custom-btn」クラスの方は消しちゃってOK!
間違っても元々あるbtn-○の方は消さないようにいい!!

あとは自分でどこの色を変えたらどこが変わるのか。などなどお試しあれええ!!

これは紹介せざるを得ない。パリピボタン!!!!!!!!!!!No.17

See the Pen by ここあ (@cocoadepon) on CodePen.

animationとkeyframes使ってるからこの辺のkeyframesとかはまた今度詳しくまとめようかなとは思う!

keyframes大好きパリピなので!!笑。ぜひ。パリピサイト作る機会があるならこのボタンを使ってあげて欲しい。あわよくばパリピサイトコーディングはさせて欲しい。w←

キーフレーム気になって寝れないよ!って人はこちら▼

https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes

よく出てくるプロパティ軽く説明してみる

transition

transition: all 0.3s ease;

よく出てくるこれ。transitionを日本語訳すると

  • 変化
  • 移り変わり

アニメーションに関するプロパティなんだなーは容易に想像がつくかとは思う!

hoverした時のCSSを反映させるまでの時間を指定しているのがこのtransition。

backgroundみたいに4つのプロパティを一括指定できる

指定する順番は

  • transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
指定できるプロパティ指定できる内容
transition-propertyアニメーションさせるプロパティを指定(all,none,指定するプロパティ)
transition-duration時間アニメーションが動いている時間)(○s,○ms)
transition-timing-functionタイミング(ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier)
transition-delay時間アニメーションが開始するまでの時間)(○s,○ms)
https://haniwaman.com/css-transition/
細かい内容ははにわまんさんのこのブログでほぼ全部理解できる!!!!!!

:hoverの疑似要素側ではないに必ずtransitionプロパティはつけてあげる!カーソル外した時の動き方がバグったりするから!

transitionとセットで覚えたいtransform

transformは要素を変形させる役割。transitionと合わせることで動きのあるアニメーションを作り出せる!!!

transformプロパティ指定できる内容
transform: translate(○px, ○px);どの方向にどれだけ移動させるかを指定。X方向,Y方向,Z方向それぞれ指定可
transform: scale(.5, .5);要素の拡大縮小の縮尺比率指定。左記だとX方向,Y方向に0.5倍。X方向,Y方向,Z方向それぞれ指定可
transform: rotate(○deg);要素を回転させる角度指定。時計回りに回る。deg単位は「度」って認識でおk。X方向,Y方向,Z方向それぞれ指定可
transform: skew(○deg,○deg);傾斜角度を指定。並行四辺形を表現したい時とかに使う!X方向,Y方向それぞれ指定可
transform: perspective(100px) rotateY(40deg);rotateと組み合わせて使うもの。遠くのものは小さく,近くのものは大きく見える。

実装したいボタンにあるtransformプロパティを少しいじってみて実際に動かしてみるのが一番理解は深まると思う!!

上の表のは一例でX,Y,Z3方向全部に指定したい場合はtranslate3d()にしたりX方向だけならtranslateX()にしたり色々奥は深い!からやってみるに限る!分かりやすい記事もたっくさんあるから使いこなしたい人は色々見てみて、アニメーションの幅をゴリゴリ増やしていったら楽しいと思う〜♪

さいごに

もしもとっても暇な時があったとしたら、一つずつCodepenにあげる日が来るかもしれないけれど、今のところ予定はない!w

最初のCodepenに30個全部まとめて見たので、ぜひ全部ホバーしてみてお気に入りのホバーに出会えると嬉しいなあって思いまっす!好評だったら第二弾やります!多分!現在のここちゃお気に入りボタン一覧でした♪

みんな楽しいCSSライフを〜〜〜〜〜〜(^ ^)

パリピ

首を痛めた。これをまとめるために。。。ボタンの完がくるくる回るの気づいてくれたかな、、、遊び心、、、

パリピ研修生

次は見出し一覧あたりお願いしやす←

COCOA

18歳からフリーランスとして生きてます★ このブログではWEB制作を中心に日常からいろいろなことを書いていきます!
パリピワールドへようこそ\(^o^)/
お仕事のご依頼はお問い合わせ又はTwitterからお願いします★

人気記事