CSSで再生ボタン（右矢印ボタン）を作る方法

記事内にPRが含まれる場合があります

2018年5月30日2024年9月22日

URLをコピーしました！

丸の中に右向きの矢印があるボタンというかアイコンというか。
画像を置いても良かったのですがCSSでできないかと思い実現してみました。

手間を考えたら断然画像でやったほうが早かったと思うのですが‥

再生ボタンのCSSとHTMLのサンプルを示します

HTMLファイルはこちら

<div style="position: relative;text-align: center;">
 <div class="play-btn">
  <a class="mybtn" href="">最新情報はこちらをクリック</a>
 </div>
</div>

CSSファイルはこちら

/*****再生ボタン*****/

/*白丸部分 */ 
.play-btn a:before {
	display: block;
	content: "";
	position: absolute;
	top: 40px;
	left: 50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	margin-left: -15px;
}

/*after要素で右三角 */ 
.play-btn a:after {
	display: block;
	content: "";
	position: absolute;
	top: 45px;
	left: 50%;
	width: 0px;
	height: 0px;
	border: 10px solid transparent;
	border-left: 15px solid #ffb4b4;
	margin-left: -5px;
}

/*アンカーテキストの下線をなくす*/
.play-btn a{
	text-decoration:none!important;
}

/*角丸のピンクボタン部分の装飾*/
.mybtn {
    display: inline-block;
    padding: 12px;
    color: #fff;
    background-color: #ffb4b4;
    border-radius: 16px;
    font-size: 18px;
    height:70px;
}

再生ボタンのCSSとHTMLの解説

まずHTMLファイルの1行目です。

<div style="position: relative;text-align: center;">

これはdivタグにposition:relativeをつけることで、このdivタグの中の要素のdivタグのplay-btnにposition:absoluteを指定することで再生ボタンの描画位置を外側のdivタグに対する絶対位置で指定できるようにするためです。

またtext-align:centerで、中のボタンを真ん中寄せしています。

肝心の再生ボタンはbeforeとafterで2つの構成となっています。まずはbefore。

/*白丸部分 */ 
.play-btn a:before {
	display: block;
	content: "";
	position: absolute;
	top: 40px;
	left: 50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	margin-left: -15px;
}

position: absoluteで、top:40pxのleft:50%と指定することで以下のような場所に白丸を描画します。丸の大きさはwidth:30pxのheight:30pxです。background:#fffで背景白色を指定。

このままだと以下の図のようにtop:40px、left:50%の位置が丸の左上が来てしまうので

丸を左に15px移動（margin-left:-15px部分）しています。

次にafterの説明です。ここでピンク色の右三角を表示します。

/*after要素で右三角 */ 
.play-btn a:after {
	display: block;
	content: "";
	position: absolute;
	top: 45px;
	left: 50%;
	width: 0px;
	height: 0px;
	border: 10px solid transparent;
	border-left: 15px solid #ffb4b4;
	margin-left: -5px;
}

やはり外側のdivタグの上から45px目、左から50%目から描画しますが、margin-left:-5pxで左側に調整しています。

三角をCSSで描画する方法はまた別途解説しているサイト様を参照いただければ理屈を理解できると思います。
border:10px solid transparentでボーダーの上右下左を透明にしてて、その上に
border-left:15px solid #ffb4b4;で左側のボーダーカラーをピンクに指定してて一見すると三角に見えるようにしている訳ですね。

最後にピンクのボタン部分の説明です。

ここでAタグにmybtnのスタイルを適用しています。

  <a class="mybtn" href="">最新情報はこちらをクリック</a>

CSSはこちら。ココは特に説明する部分が無いですね。高さを70pxと指定してるのがあまり気に入らない感じですが。

/*角丸のピンクボタン部分の装飾*/
.mybtn {
    display: inline-block;
    padding: 12px;
    color: #fff;
    background-color: #ffb4b4;
    border-radius: 16px;
    font-size: 18px;
    height:70px;
}

これで以下のようなボタンが出来ます。