【CSSボタン】CSSでシンプルボタンに作り方を解説

CSSでのボタンを装飾する

こんにちは、CSSでボタンを作る時、枠やhover時のアクションに困っている人は多いと思います。
そこで今回はCSSでボタンを作る方法をお教えします、

シンプルなボタンを作ってみる

<div class="test"><a href="#" class="button">BUTTON</a></div>

.button {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #80ffd5;
  border: solid 2px #80ffd5;
  border-radius: 3px;
  transition: 0.3s;
}

.button:hover {
  background: #80ffd5;
  color: white;
}

BUTTON

こちらがシンプルなボタンです。hoverすると背景が青くなり、もじが白になります。各CSSの解説をしていきたいと思います。

解説

display: inline-block;

inline-blockにより要素横に並んでいくようになり、aタグの範囲が文字の周りだけになると思います。

padding: 0.3em 1em;

paddingにより余白を作っていきます。marginでは外側に余白になってしまうので、paddingで内側の余白を作ります。

border: solid 2px #80ffd5;

borderで周りを囲みます。borderの値は、線の種類、線の太さ、色となっております。

border: 線の種類 線の太さ #線の色;

border-radius: 3px;

border-radiusでボックスの角を丸くします。数が増えるほど角が丸くなります。

transition: 0.3s;

transitionにより、:hoverされた時、何秒間で変化する指定できます。