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 | 境界線色の指定 |