マウスを乗せると背景色と文字色がふわっと変わるボタン 角丸 横幅固定 HTML/CSS サンプル

マウスを乗せると背景色と文字色がふわっと変わるボタン 角丸 横幅固定 HTML/CSS サンプル

CODE

.button {
  display: block;
  background: #483d8b;
  width: 20rem;
  padding: 1rem;
  border-radius: .6rem;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  letter-spacing: .1rem;
  transition: .5s;
}

.button:hover {
  background: #87ceeb;
  color: #191919;
}
<a class="button" href="https://code-idea.com/">マウスオンで変わる</a>

DEMO

See the Pen button-sample-009 by CODE IDEA (@codeidea) on CodePen.

※ブラウザにデフォルトで付いているスタイルを消すため、リセットCSS「destyle.css」を使っています。

※CSSの指定方法は一例であり、同じ見た目を違う書き方で表現することもできます。絶対正しいというものではありません。

MEMO

ボタンが変化するスピードを調整するのは「transition」です。数値を小さくすれば早く変わり、大きくすれば遅く変わります。
例の「.5s」は「0.5秒」の意味です。最初がゼロになる時はゼロを省略してもよいです。

class「button」の後に「:hover」を付けて、「マウスが乗ったとき」を指定します。スマホの場合はマウスオンの概念がないため、タップした時に一瞬見えるか見えないかという感じになります。
hover には「背景色」と「文字色」を指定することで、マウスオン時にそれらの色に変更されます。

クラス名、各数値、色の指定、リンク先、文言は用途に合わせて変えてください。

MANUAL

background背景色の指定
width横幅の指定
paddingボックス内の隙間の指定
border-radius境界線角丸の指定
color文字色の指定
text-align文字位置の指定
text-decoration文字装飾の指定
letter-spacing文字間の指定
transition変化の指定

ボタンカテゴリの最新記事