ホームページ制作を大阪で安く頼むならプロットハブ！

ホームページ制作を大阪で安く頼むならプロットハブ！
毎月5社限定企画実施中

プロットハブ技術ブログ
ホーム » ホームページ制作 » 【コピペだけで使える】レスポンシブ&アニメーション付き！HTMLとCSSのボタンデザイン20選!! – その1

【コピペだけで使える】レスポンシブ&アニメーション付き！HTMLとCSSのボタンデザイン20選!! – その1

Ryuto Yamana

Ryuto Yamana

2024/9/25

ホームページ制作 html・css
#CSS #HTML #コーディング #デザイン #ホームページ #ボタン

こんにちは！株式会社プロットハブのエンジニア、山名です。
今回はHTMLとCSSのコピペで使えてレスポンシブ&アニメーションも標準装備のボタンをご紹介します！
今回ご紹介するボタンデザインは派手なものを避け、ホームページ制作案件でも使えるビジネスライクなデザインを揃えてみました！
レスポンシブの記述やプレフィックスも含めると一つ一つが結構な長さになっていますが、コピペで使えますから…！貼り付けるだけですから…！
それではどうぞ！

シンプル シリーズ

ごくありきたりな長方形のボタンです。ホバーで色が反転します。

コードを表示

HTML

<a href="" class="simple-btn1">シンプルなボタンデザイン1</a>

CSS

.simple-btn1{
  --mainColor :#3b82f6;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-style: solid;
  border-color: var(--mainColor);
  background-color: var(--mainColor);
  font-weight: 700;
  color: var(--subColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 1.1111111111111112vw, 18px);
  padding-right: clamp(8px, 4.266666666666667vw, 24px);
  padding-left: clamp(8px, 4.266666666666667vw, 24px);
  padding-top: clamp(4px, 2.1333333333333333vw, 12px);
  padding-bottom: clamp(4px, 2.1333333333333333vw, 12px);
  border-top-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-right-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-bottom-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-left-width: clamp(1px, 0.1388888888888889vw, 3px);
}

.simple-btn1:hover {
  background-color: var(--subColor);
  color: var(--mainColor);
}

@media (min-width: 1025px) {
  .simple-btn1 {
    font-size: clamp(14px, 4.266666666666667vw, 18px);
    padding-right: clamp(24px, 2.2222222222222223vw, 40px);
    padding-left: clamp(24px, 2.2222222222222223vw, 40px);
    padding-top: clamp(12px, 1.1111111111111112vw, 24px);
    padding-bottom: clamp(12px, 1.1111111111111112vw, 24px);
  }
}

ごくありきたりな長方形のボタンその2です。ホバーで先ほどのボタンとは逆に色が反転します。

コードを表示

HTML

<a href="" class="simple-btn2">シンプルなボタンデザイン2</a>

CSS

.simple-btn2{
  --mainColor :#3b82f6;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-style: solid;
  border-color: var(--mainColor);
  background-color: var(--subColor);
  font-weight: 700;
  color: var(--mainColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 1.1111111111111112vw, 18px);
  padding-right: clamp(8px, 4.266666666666667vw, 24px);
  padding-left: clamp(8px, 4.266666666666667vw, 24px);
  padding-top: clamp(4px, 2.1333333333333333vw, 12px);
  padding-bottom: clamp(4px, 2.1333333333333333vw, 12px);
  border-top-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-right-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-bottom-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-left-width: clamp(1px, 0.1388888888888889vw, 3px);
}

.simple-btn2:hover {
  background-color: var(--mainColor);
  color: var(--subColor);
}

@media (min-width: 1025px) {
  .simple-btn2 {
    font-size: clamp(14px, 4.266666666666667vw, 18px);
    padding-right: clamp(24px, 2.2222222222222223vw, 40px);
    padding-left: clamp(24px, 2.2222222222222223vw, 40px);
    padding-top: clamp(12px, 1.1111111111111112vw, 24px);
    padding-bottom: clamp(12px, 1.1111111111111112vw, 24px);
  }
}

角丸タイプのボタンその1です。ホバーで色が反転します。

コードを表示

HTML

<a href="" class="simple-btn3">シンプルなボタンデザイン3</a>

CSS

.simple-btn3{
  --mainColor :#3b82f6;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 9999px;
  border-style: solid;
  border-color: var(--mainColor);
  background-color: var(--mainColor);
  font-weight: 700;
  color: var(--subColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 1.1111111111111112vw, 18px);
  padding-right: clamp(8px, 4.266666666666667vw, 24px);
  padding-left: clamp(8px, 4.266666666666667vw, 24px);
  padding-top: clamp(4px, 2.1333333333333333vw, 12px);
  padding-bottom: clamp(4px, 2.1333333333333333vw, 12px);
  border-top-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-right-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-bottom-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-left-width: clamp(1px, 0.1388888888888889vw, 3px);
}

.simple-btn3:hover {
  background-color: var(--subColor);
  color: var(--mainColor);
}

@media (min-width: 1025px) {
  .simple-btn3 {
    font-size: clamp(14px, 4.266666666666667vw, 18px);
    padding-right: clamp(24px, 2.2222222222222223vw, 40px);
    padding-left: clamp(24px, 2.2222222222222223vw, 40px);
    padding-top: clamp(12px, 1.1111111111111112vw, 24px);
    padding-bottom: clamp(12px, 1.1111111111111112vw, 24px);
  }
}

角丸タイプのボタンその2です。ホバーで先ほどのボタンとは逆に色が反転します。

コードを表示

HTML

<a href="" class="simple-btn4">シンプルな長方形ボタン4</a>

CSS

.simple-btn4{
  --mainColor :#3b82f6;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 9999px;
  border-style: solid;
  border-color: var(--mainColor);
  background-color: var(--subColor);
  font-weight: 700;
  color: var(--mainColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 1.1111111111111112vw, 18px);
  padding-right: clamp(8px, 4.266666666666667vw, 24px);
  padding-left: clamp(8px, 4.266666666666667vw, 24px);
  padding-top: clamp(4px, 2.1333333333333333vw, 12px);
  padding-bottom: clamp(4px, 2.1333333333333333vw, 12px);
  border-top-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-right-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-bottom-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-left-width: clamp(1px, 0.1388888888888889vw, 3px);
}

.simple-btn4:hover {
  background-color: var(--mainColor);
  color: var(--subColor);
}

@media (min-width: 1025px) {
  .simple-btn4 {
    font-size: clamp(14px, 4.266666666666667vw, 18px);
    padding-right: clamp(24px, 2.2222222222222223vw, 40px);
    padding-left: clamp(24px, 2.2222222222222223vw, 40px);
    padding-top: clamp(12px, 1.1111111111111112vw, 24px);
    padding-bottom: clamp(12px, 1.1111111111111112vw, 24px);
  }
}

ちょっとオシャレな破線タイプの長方形ボタンです。擬似要素を使い、ホバーで破線が通常の直線に変わります。
シンプルと言いつつ記述量は少し多めですが貼り付ければOKなのできっとダイジョウブ。

コードを表示

HTML

<a href="" class="simple-btn5">シンプルなボタンデザイン5</a>

CSS

.simple-btn5{
  --mainColor :#3b82f6;
  --subColor :#fff;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-style: dashed;
  border-color: var(--mainColor);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  font-weight: 700;
  color: var(--mainColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 1.1111111111111112vw, 18px);
  padding-right: clamp(8px, 4.266666666666667vw, 24px);
  padding-left: clamp(8px, 4.266666666666667vw, 24px);
  padding-top: clamp(4px, 2.1333333333333333vw, 12px);
  padding-bottom: clamp(4px, 2.1333333333333333vw, 12px);
  border-top-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-right-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-bottom-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-left-width: clamp(1px, 0.1388888888888889vw, 3px);
}

@media (min-width: 1025px) {
  .simple-btn5 {
    font-size: clamp(14px, 4.266666666666667vw, 18px);
    padding-right: clamp(24px, 2.2222222222222223vw, 40px);
    padding-left: clamp(24px, 2.2222222222222223vw, 40px);
    padding-top: clamp(12px, 1.1111111111111112vw, 24px);
    padding-bottom: clamp(12px, 1.1111111111111112vw, 24px);
  }
}

.simple-btn5::before ,.simple-btn5::after {
  position: absolute;
  height: 0px;
  width: 0px;
  border-style: solid;
  border-color: var(--mainColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.simple-btn5::before {
  top: 0px;
  left: 0px;
  border-top-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-left-width: clamp(1px, 0.1388888888888889vw, 3px);
}

.simple-btn5::after {
  bottom: 0px;
  right: 0px;
  border-bottom-width: clamp(1px, 0.1388888888888889vw, 3px);
  border-right-width: clamp(1px, 0.1388888888888889vw, 3px);
}

.simple-btn5:hover {
  border-color: transparent;
}

.simple-btn5:hover::before ,.simple-btn5:hover::after {
  height: 100%;
  width: 100%;
}

シンプルな矢印が付いたボタン。矢印要素はボタンのクラスとは別で作ったので、親要素に’simple-arrow’、子要素に’btn-arrow’のクラスを追加するだけでどのボタンにも配置できます。
今更かもですが、角度やホバー時の位置を変えたい時は「–tw-rotate: 45deg;」や「–tw-rotate: 45deg;」を変更してください。

コードを表示

HTML

<a href="" class="simple-btn1 simple-arrow">矢印付きシンプルなボタン<span class="btn-arrow"></span></a>

CSS

.simple-btn1{
/*　先ほど紹介したsimple-btn1と同じなので割愛
ここで設定している--mainColor、--subColorが矢印の色にも対応しています */
}

.simple-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -moz-column-gap: 5px;
  -webkit-column-gap: 5px;
  column-gap: 5px;
}

.simple-arrow .btn-arrow{
  position: relative;
  display: inline-block;
  --tw-rotate: 45deg;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-style: solid;
  border-color: var(--subColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  width: clamp(10px, 0.6944444444444444vw, 12px);
  height: clamp(10px, 0.6944444444444444vw, 12px);
  border-top-width: clamp(2px, 0.1388888888888889vw, 3px);
  border-right-width: clamp(2px, 0.1388888888888889vw, 3px);
  margin: 0;
}

.simple-arrow:hover .btn-arrow{
  --tw-translate-x: 3px;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: var(--mainColor);
}

立体感ある シリーズ

ホバー時に凹む長方形タイプのボタンです。
このデザインにありがちな、ホバーした時に要素の高さが変わって全体がカクッとずれるのを防ぐように書いています。

コードを表示

HTML

  <div class="click-btn1">
    <a href="">立体感のあるボタン1</a>
  </div>

CSS

.click-btn1 {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  padding-top: 3px; /* translate分の余白を作る */
}

 .click-btn1 a{
  --mainColor :#22c55e;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  --tw-translate-y: -3px;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  background-color: var(--mainColor);
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
  -webkit-box-shadow: 0 3px 0 #000;
  box-shadow: 0 3px 0 #000;
}

.click-btn1 a:hover{
  --tw-translate-y: 0px;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -webkit-box-shadow: 0 0 0 #000;
  box-shadow: 0 0 0 #000;
}

@media (min-width: 1025px){
  .click-btn1 a{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

ホバー時に凹む丸型タイプのボタンです。
border-radiusを追加しただけ。

コードを表示

HTML

  <div class="click-btn2">
    <a href="">立体感のあるボタン2</a>
  </div>

CSS

.click-btn2 {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  padding-top: 3px;
}

.click-btn2 a{
  --mainColor :#22c55e;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  --tw-translate-y: -3px;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  border-radius: 9999px;
  background-color: var(--mainColor);
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
  -webkit-box-shadow: 0 3px 0 #000;
  box-shadow: 0 3px 0 #000;
}

.click-btn2 a:hover{
  --tw-translate-y: 0px;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -webkit-box-shadow: 0 0 0 #000;
  box-shadow: 0 0 0 #000;
}

@media (min-width: 1025px){
  .click-btn2 a{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

破線で影付きのボタンがホバー時に凹みます。

コードを表示

HTML

  <div class="click-btn3">
    <a href="">立体感のあるボタン2</a>
  </div>

CSS

.click-btn3{
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  padding-top: 3px;
}

.click-btn3 a{
  --mainColor :#22c55e;
  display: block;
  border-style: dashed;
  border-color: var(--mainColor);
  text-align: center;
  font-weight: 700;
  color: var(--mainColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
  border-top-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-right-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-bottom-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-left-width: clamp(1px, 0.06944444444444445vw, 2px);
  -webkit-box-shadow: 5px 5px 0 var(--mainColor);
  box-shadow: 5px 5px 0 var(--mainColor);
}

.click-btn3 a:hover{
  --tw-translate-y: 5px;
  --tw-translate-x: 5px;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: var(--mainColor);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  -webkit-box-shadow: 0 0 0 var(--mainColor);
  box-shadow: 0 0 0 var(--mainColor);
}

@media (min-width: 1025px){
  .click-btn3 a{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

シャドウ付きシリーズ

box-shadowを採用して立体感を出したパターンです。ホバーでシャドウが消えます。

コードを表示

HTML

<a href="" class="shadow-btn1">シャドウ付きボタン</a>

CSS

.shadow-btn1{
  --mainColor :#22c55e;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  background-color: var(--mainColor);
  font-weight: 700;
  color: var(--subColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
  -webkit-box-shadow: 0 0 10px var(--mainColor);
  box-shadow: 0 0 10px var(--mainColor);
}

.shadow-btn1:hover{
  -webkit-box-shadow: 0 0 0 #000;
  box-shadow: 0 0 0 #000;
}

@media (min-width: 1025px){
  .shadow-btn1{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

同じくbox-shadowを使用していますが、ホバー時にシャドウが消えるだけでなく少し透過します。

コードを表示

HTML

<a href="" class="shadow-btn2">シャドウ→透過ボタン</a>

CSS

.shadow-btn2{
  --mainColor :#22c55e;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  background-color: var(--mainColor);
  font-weight: 700;
  color: var(--subColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
  -webkit-box-shadow: 0 0 10px var(--mainColor);
  box-shadow: 0 0 10px var(--mainColor);
}

.shadow-btn2:hover{
  opacity: 0.6;
  -webkit-box-shadow: 0 0 0 #000;
  box-shadow: 0 0 0 #000;
}

@media (min-width: 1025px){
  .shadow-btn2{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

こちらもbox-shadowですが、ホバー時にシャドウが消えて枠線が表示されます。

コードを表示

HTML

<a href="" class="shadow-btn3">シャドウ→アウトラインボタン</a>

CSS

.shadow-btn3{
  --mainColor :#22c55e;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-style: solid;
  border-color: transparent;
  background-color: var(--mainColor);
  font-weight: 700;
  color: var(--subColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
  border-top-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-right-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-bottom-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-left-width: clamp(1px, 0.06944444444444445vw, 2px);
  -webkit-box-shadow: 0 0 10px var(--mainColor);
  box-shadow: 0 0 10px var(--mainColor);
}

.shadow-btn3:hover{
  border-color: var(--mainColor);
  background-color: var(--subColor);
  color: var(--mainColor);
  -webkit-box-shadow: 0 0 0 #000;
  box-shadow: 0 0 0 #000;
}

@media (min-width: 1025px){
  .shadow-btn3{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

box-shadowを採用して立体感を出したパターンです。ホバーで背景色と文字色が反転し、シャドウが付きます。

コードを表示

HTML

<a href="" class="shadow-btn4">ホバーで色反転&シャドウが付くボタン</a>

CSS

.shadow-btn4{
  --mainColor :#22c55e;
  --subColor :#fff;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-style: solid;
  border-color: transparent;
  background-color: var(--mainColor);
  font-weight: 700;
  color: var(--subColor);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
  border-top-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-right-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-bottom-width: clamp(1px, 0.06944444444444445vw, 2px);
  border-left-width: clamp(1px, 0.06944444444444445vw, 2px);
  -webkit-box-shadow: 0 0 0 var(--mainColor);
  box-shadow: 0 0 0 var(--mainColor);
}

.shadow-btn4:hover{
  border-color: var(--mainColor);
  background-color: var(--subColor);
  color: var(--mainColor);
  -webkit-box-shadow: 0 0 10px var(--mainColor);
  box-shadow: 0 0 10px var(--mainColor);
}

@media (min-width: 1025px){
  .shadow-btn4{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

背景が動くシリーズ

ホバー時に背景色が左から右に色が変わります。

コードを表示

HTML

<a href="" class="bg-move-btn1">背景色が左から右へ移動するボタン</a>

CSS

.bg-move-btn1{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
}

.bg-move-btn1:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1025px){
  .bg-move-btn1{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

.bg-move-btn1::before{
  position: absolute;
  inset: 0px;
  z-index: -1;
  width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.bg-move-btn1:hover::before{
  width: 100%;
}

少し色味を置いておいてホバー時に背景色が右から左に色が変わるタイプです。

コードを表示

HTML

<a href="" class="bg-move-btn2">背景色が右から左へ移動するボタン</a>

CSS

.bg-move-btn2{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
}

.bg-move-btn2:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1025px){
  .bg-move-btn2{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

.bg-move-btn2::before{
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: auto;
  z-index: -1;
  width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.bg-move-btn2:hover::before{
  width: 100%;
}

少し色味を置いておいてホバー時に背景色が左から右に色が変わるタイプです。

コードを表示

HTML

<a href="" class="bg-move-btn3">背景色が左から右へ移動するボタンver2</a>

CSS

.bg-move-btn3{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
}

.bg-move-btn3:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1025px){
  .bg-move-btn3{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

.bg-move-btn3::before{
  position: absolute;
  inset: 0px;
  z-index: -1;
  width: clamp(5px, 0.3472222222222222vw, 10px);
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.bg-move-btn3:hover::before{
  width: 100%;
}

ホバー時に背景色が右から左に色が変わります。

コードを表示

HTML

<a href="" class="bg-move-btn4">背景色が右から左へ移動するボタンver2</a>

CSS

.bg-move-btn4{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
}

.bg-move-btn4:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1025px){
  .bg-move-btn4{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

.bg-move-btn4::before{
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: auto;
  z-index: -1;
  width: clamp(5px, 0.3472222222222222vw, 10px);
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.bg-move-btn4:hover::before{
  width: 100%;
}

ホバー時に背景色が真ん中から左右に広がります。ちょっとオシャレ？

コードを表示

HTML

<a href="" class="bg-move-btn5">背景色が真ん中から左右に広がるボタン</a>

CSS

.bg-move-btn5{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
}

.bg-move-btn5:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1025px){
  .bg-move-btn5{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

.bg-move-btn5::before{
  position: absolute;
  inset: 0px;
  left: 0px;
  z-index: -1;
  margin: auto;
  width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.bg-move-btn5:hover::before{
  width: 100%;
}

左右に広がるなら上下にも広げるべきでしょう。

コードを表示

HTML

<a href="" class="bg-move-btn6">背景色が真ん中から上下に広がるボタン</a>

CSS

.bg-move-btn6{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
}

.bg-move-btn6:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1025px){
  .bg-move-btn6{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

.bg-move-btn6::before{
  position: absolute;
  inset: 0px;
  left: 0px;
  z-index: -1;
  margin: auto;
  height: 0px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.bg-move-btn6:hover::before{
  height: 100%;
}

上下左右に広がるなら斜めにだって行けるさ！

コードを表示

HTML

<a href="" class="bg-move-btn7">背景色が真ん中から斜め状に広がるボタン</a>

CSS

.bg-move-btn7{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  font-size: clamp(14px, 0.9722222222222222vw, 16px);
  padding-right: clamp(8px, 2.1333333333333333vw, 16px);
  padding-left: clamp(8px, 2.1333333333333333vw, 16px);
  padding-top: clamp(4px, 1.0666666666666667vw, 8px);
  padding-bottom: clamp(4px, 1.0666666666666667vw, 8px);
}

.bg-move-btn7:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1025px){
  .bg-move-btn7{
    font-size: clamp(14px, 3.7333333333333334vw, 16px);
    padding-right: clamp(24px, 1.6666666666666665vw, 32px);
    padding-left: clamp(24px, 1.6666666666666665vw, 32px);
    padding-top: clamp(12px, 0.8333333333333333vw, 16px);
    padding-bottom: clamp(12px, 0.8333333333333333vw, 16px);
  }
}

.bg-move-btn7::before{
  position: absolute;
  inset: 0px;
  left: 0px;
  z-index: -1;
  margin: auto;
  height: 0px;
  width: 100%;
  --tw-rotate: 45deg;
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
}

.bg-move-btn7:hover::before{
  height: 1000%;
}

いかがでしたか？
ある程度レスポンシブまで考慮しているので、ぜひコピペで使ってみてください！

それでは！

プロットハブはホームページ制作を
支援しています。
ご興味のある方はぜひお気軽に
ご相談ください。

プロットハブに
ホームページ制作の相談してみる

一覧ページに戻る

全カテゴリ一覧

全タグ一覧

関連記事

コメント

コメントを残す

コメントが承認されると公開されます。※の入力欄は必須項目です

ホームページ制作が毎月5社限定5万5千円から！ご依頼の方はコチラ！