リンクや送信ボタンなど、Webサイト制作において、ボタンは重要なアイテムです。

CSSでおしゃれなボタンデザインを作成したいですよね。

今回は実用的なボタンデザインのサンプルコードを5つ紹介します。

すべてHTMLとCSSのみで作れるボタンデザインなので、画像を用意したりプログラミングを学んだりする必要はないですよ。

同じようなデザインではなく、なるべくバラバラなものを紹介しています。

ぜひ、コピペやアレンジをして、活用してみてください。

基本となるスタイル

ボタンデザインを紹介する前に、共通となる基本的なCSSを紹介します。

html {
  box-sizing: border-box;
}
.btn {
  position: relative;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: all 0.3s;
}

「box-sizing: border-box」を指定すると、要素のサイズがpaddingとborderを含めたものになります。

レスポンシブデザインにする際によく使われる指定ですね。

初期値はcontent-boxです。

この場合、paddingとborderを含めないため、要素の横幅を100%にしたときに画面内からはみ出るということが起きてしまします。

その他にも、条件によって親要素からはみ出てしまうことがあるので、この指定はしておいた方が良いでしょう。

その他に、文字のサイズや装飾のベースを指定しています。transitionを使ってアニメーションの速度なども決めていますね。

上記のCSSを使いつつ、それぞれのボタンデザインを追加する形で紹介します。

また、アイコンを使うときには、「Font Awesome」を使います。

導入の仕方はこちらのページを参考にしてみてください。

https://web-camp.io/magazine/archives/27886

シンプルな角丸ボタン

最初は、どこにでも使えるようなシンプルなボタンデザインを紹介します。

<a href="#" class="btn btn01"><span>BUTTON</span></a>

.btn01 {
  padding: 10px 35px;
  background-color: #009b9f;
  color: #fff;
  border-radius: 5px;
}
.btn01:hover {
  background: #00c5cc;
  color: #fff;
}

border-radiusで角丸にしています。背景やサイズなどを変えてアレンジしてみても良いですね。

立体的にした角丸ボタン

先ほどの角丸のボタンデザインを立体的にして、周囲に影をつけます。

<a href="#" class="btn btn02"><span>BUTTON</span></a>

.btn02 {
  padding: 10px 35px;
  background: #009b9f;
  color: #fff;
  border-radius: 5px; 
  border-bottom: 5px solid #006366;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .8);
}
.btn02:hover {
  margin-top: 3px;
  background: #00c5cc;
  border-bottom: 2px solid #006366;
  box-shadow: 0 0px 4px rgba(0, 0, 0, .3);
}

マウスをホバーさせたときに、ボタンが押し込まれるような動きをします。

影の位置なども変えていますね。

横から色が変わるボタン

マウスを上に乗せると、横から色が伸びてくるボタンデザインです。

<a href="#" class="btn btn03"><span>BUTTON</span></a>

.btn03 {
  padding: 10px 35px;
  overflow: hidden;
  background: #009b9f;
  color: #fff;
}
.btn03 span {
  position: relative;
}
.btn03:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: #ffb300;
  transition: all 0.5s;
  transform: translateX(-95%);
}
.btn03:hover:before {
  transform: translateX(0%);
}

色が変わる部分は、疑似要素beforeで作成しています。

角度を変えることで、下から伸ばしたり斜めにしたりすることができますね。

横長のSNSフォローボタン

SNSフォローを促すようなボタンデザインです。

<a href="#" class="btn btn04">
  <i class="fab fa-twitter"></i> <span>Follow Me</span>
</a>

.btn04 {
  display: inline-block;
  padding: 10px 20px;
  overflow: hidden;
  color: #fff;
  border-radius: 5px;
  background: #1d9bf0;
}
.btn04 span {
  display:inline-block;
  transition: all .5s;
}
.btn04:hover span {
  transform: rotateX(360deg);
}

マウスを乗せると、文字が回転するように作りました。

rotateYとすると横に回転しますね。

Font Awesomeを使ってアイコンを表示させています。

この他にもfasebookなど、ポピュラーなSNSのアイコンはだいたい揃っているので、ぜひ探してみてください。

枠線が浮き出たボタン

枠線がボタンから離れて浮き出たボタンデザインです。

<a href="#" class="btn btn05">
  <span>BUTTON</span> <i class="fas fa-chevron-right"></i>
</a>

body {
  background: #1d9bf0;
}
.btn05 {
  padding: 15px 35px;
  margin: 10px;
  background: #fff;
  border-radius: 100vh;
}
.btn05:hover {
  background: #eee;
}
.btn05:before {
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  content: "";
  transition: all 0.3s ease;
  border: 3px solid #333;
  border-radius: 100vh;
}
.btn05:hover:before {
  top: 0;
  left: 0;
}

今回は、枠線が浮き出ていることがわかるようにbodyの背景色を青くしています。

線の部分は、beforeで作成していますね。

最初は左上に位置を指定しておいて、マウスを乗せたときにボタンと重なるようにしています。

枠線の「width: calc(100% – 6px)」の6pxは、枠線の分だけ小さくしたものです。

まとめ：サンプルコードを元にアレンジしてみよう

今回は、CSSで作れるボタンデザインのサンプルコードを5つ紹介しました。

大きさや色などを変えて、サイトに合わせてアレンジしてみてくださいね。

今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／