【CSS】ボタンのデザイン10選:丸ごとコピペなので初心者も簡単

WEB制作/デザイン

この記事では、HTMLとCSSだけで色々な用途で使用可能なボタンのデザインをいくつか紹介します。ブログやHPでお問い合わせボタンや詳細ボタンなどのCTAに使って下さい。

初心者の方でもあまり難しく考えないで済む様にHTML内にスタイルを記述しているので全て丸々コピペでOKです。

使い方

WordPress:カスタムHTMLに丸々コピペ
静的サイト :bodyの中に丸々コピペ
サイト全体 :下記を読んで下さい

HTMLとCSSを別々にしてサイト全体に反映させたい場合は、classを外して反映させたい要素名に変更してから<style>〜</style>の中身を切り抜いてスタイルシートに記述して下さい。(ある程度マークアップ言語のリテラシーがある方じゃないと崩れちゃうかもしれないです。)

注意‼︎

一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass="この部分"を任意のものにすれば解決します。

CSSの基本的な書き方は以下。

基本的なボタンデザイン

まずは簡単な基本的なボタンのデザインの紹介です。

下記が基本的なボタンの作り方とデザインです。以下省略。

ボタン

下記のHTML(CSS付き)をコピペして下さい。以下省略。

<a href="#" class="btn1">ボタン</a>
<style>
.btn1 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #f4b364; /*色*/
  border: solid 2px #f4b364; /*ボーダー*/
  border-radius: 3px;
  transition: .4s;
}

.btn1:hover {
  background: #f4b364; /*マウスホバー時の背景*/
  color: white; /*マウスホバー時のテキスト色*/
}
</style>

色反転バージョンです。

ボタン

<a class="btn2">ボタン</a>
<style>
.btn2 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #f4b364;
  color: white;
  border: solid 2px #f4b364;
  border-radius: 3px;
  transition: .4s;
}

.btn2:hover {
  background: white;
  color: #f4b364;
}
</style>

グラデーションデザイン

色反転

マウスホバーでグラデーションの位置が反転します。

ボタン

<a href="#" class="btn3">ボタン</a>
<style>
.btn3 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);;
  transition: .4s;
}

.btn3:hover {
  background-image: linear-gradient( 135deg, #9708CC 10%, #43CBFF 100%);;
}
</style>

SNS風

某SNSサイトのロゴ風

Follow Me

<a  href="#" class="btnsns">
  <i class="fab fa-instagram"></i><span>Follow Me</span>
</a>
<style>
.btnsns {
  color: #FFF;
  border-radius: 7px;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 190px;
  text-align: center;
  font-size: 25px;
  line-height: 50px;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
  text-decoration:none;
}

.btnsns:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btnsns .fab fa-instagram {
  font-size: 35px;
  position: relative;
  top: 4px;
}

.btnsns span {
  /*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.btnsns:hover {
  background: linear-gradient(135deg, #f13f79 0%, #427eff 70%);
}
</style>

立体的なデザイン

四角い良くあるボタン

 クリックすると本当のボタンの様に凹みます。

ボタン1

<a href="#" class="4">ボタン1</a>
<style>
.btn4 {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #ddd;/*ボタン色*/
  color: #111;
  border-bottom: solid 4px #999; /*下にある影の色*/
  border-radius: 3px; /*角を丸く」*/
}
.btn4:active {
  /*ボタンを押したときの動き*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
</style>

良くある丸いボタン

クリックすると本当のボタンの様に凹みます。

ボタン

<a class="btn5">ボタン</a>
<style>
.btn5 {
  display: inline-block;
  text-decoration: none;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 25px;
  color: #777!important;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #b5b5b5;
}
.btn5:active {
  /*押したとき*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: none;
}
</style>

アニメーション

ズーム

マウスを乗っけるとズームします。

ボタン

<a href="#" class="btn6">ボタン</a>
<style>
.btn6 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  -webkit-transition: transform .1s ease-in-out;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  transition: -webkit-transform .1s ease-in-out;
  transition: transform .1s ease-in-out;
  transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
}
.btn6:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
</style>

アップ

ホバーで上に動く。

ボタン

<a href="#" class="btn7">ボタン</a>
<style>
.btn7 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  -webkit-transition: transform .1s ease-in-out;
  -webkit-transition: -webkit-transform .1s ease-in-out;
  transition: -webkit-transform .1s ease-in-out;
  transition: transform .1s ease-in-out;
  transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
}
.btn7:hover {
    -webkit-transform: translateY(-0.2em);
    transform: translateY(-0.2em);
}
}
</style>

テカり

キラリとテカリ感をアニメーションで演出

ボタン

<a href="#" class="btn8">ボタン</a>

<style>
.btn8 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.btn8:before {
    content: "";
    background-color: #fff;
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
    opacity: 0;
    -webkit-animation: left-slide 2s infinite;
    animation: left-slide 2s infinite;
}

@-webkit-keyframes left-slide {
    0% {
        left: -50%;
        opacity: 0.1;
    }
    50%,
    100% {
        left: 150%;
        opacity: 0.75;
    }
}

@keyframes left-slide {
    0% {
        left: -50%;
        opacity: 0.1;
    }
    50%,
    100% {
        left: 150%;
        opacity: 0.75;
    }
}
</style>

ウェーブ

ボタンが振動してます。

ボタン

<a href="#" class="btn9">ボタン</a>

<style>
.btn9 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

.btn9:before {
    content: "";
    display: block;
    background-color: inherit;
    border-radius: inherit;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.75;
    -webkit-animation: waves 1s infinite;
    animation: waves 1s infinite;
}

@-webkit-keyframes waves {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes waves {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0;
    }
}
</style>

チカチカ

テキストがチカチカしてます。

ボタン

<a href="#" class="btn10">ボタン</a>
<style>
.btn10 {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #A2AAB1;
  color: white;
  border: solid 2px #A2AAB1; /*ボーダー*/
  border-radius: 3px;
  -webkit-animation: glow 2s infinite;
  animation: glow 2s infinite;
}

@-webkit-keyframes glow {
    from,
    to {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    25% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    27% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    29% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    31% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0.25), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    33% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    66% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    68% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    70% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
}

@keyframes glow {
    from,
    to {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    25% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    27% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    29% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    31% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0.25), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    33% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    66% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
    68% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.5), 0 0 0.1em rgba(255, 255, 255, 0), 0 0 1em rgba(255, 255, 255, 0), 0 0 2em rgba(255, 255, 255, 0);
    }
    70% {
        text-shadow: 0 0 0.05em rgba(255, 255, 255, 1), 0 0 0.1em rgba(255, 255, 255, 1), 0 0 1em rgba(255, 255, 255, 0.75), 0 0 2em rgba(255, 255, 255, 0.5);
    }
}
</style>


以上が「【CSS】ボタンのデザイン10選:丸ごとコピペなので初心者も簡単」

今後も様々なデザインを追加していく予定です。是非参考にしてみて下さい。