先頭に矢印マーク付きマウスを乗せると背景色がふわっと変わるボタン角丸横幅固定 HTML/CSS サンプル

CODE

.button {
  display: block;
  background: #f38311;
  width: 24rem;
  padding: 1.5rem;
  border-radius: .6rem;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: .1rem;
  transition: .5s;
}

.button:hover {
  background: #de5c3e;
}

.button span {
  position: relative;
  padding-left: 1.6rem;
}

.button span:before {
  content: "";
  position: absolute;
  left: 10px;
  border-style: solid;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #ffffff;
}

.button span:after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 10px;
  height: 6px;
  background: #FFF;
}

<a class="button" href="https://code-idea.com/">
  <span>先頭に三角マーク付きのボタン</span>
</a>

DEMO

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

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

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

MEMO

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

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

「.button span:before」に横向きの三角を作ります。
span に padding-left を指定することで、三角とかぶらず文字が見えるようになります。
「.button span:after」で三角と同じ色の長方形を作り、組み合わせることで矢印のように見えます。

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

MANUAL

background	背景色の指定
position	配置の指定
width	横幅の指定
height	縦幅の指定
padding	ボックス内の隙間の指定
border-radius	境界線角丸の指定
color	文字色の指定
text-align	文字位置の指定
text-decoration	文字装飾の指定
font-weight	文字ウェイトの指定
letter-spacing	文字間の指定
transition	変化の指定
padding-left	内側の間隔(左方向)の指定
content	:after :before を使う際に必須
top	上方向位置の指定
left	左方向位置の指定
border-style	境界線種類の指定
border-width	境界線太さの指定
border-color	境界線色の指定