- 記事公開日
白い丸の中に三角マーク付いたボタンをCSSだけで実装する
お問い合わせボタンを実装しようと思ってるんだけど、CSSだけで実装できるデザインのボタンを使いたいの。
白い丸の中に三角マークがついたようなリストマークのデザインを探してるんだけど、何かない？
了解ました！
こちらをどうぞ↓
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>丸の中に三角リストマーク</title>
<style>
/* ボタンのスタイル */
:root {
--sankakulist-size:0.4rem;
--base-color:#008209;
--hover-color:#de8800;
}
.list_button {
position:relative;
display:inline-block;
background-color:var(--base-color);
color:#fff;
font-size:calc(0.6rem + var(--sankakulist-size));
text-decoration:none;
border-radius:3rem;
transition:0.1s;
margin:auto;
padding:0.8em 1rem 0.8em calc(1.5rem + (var(--sankakulist-size) * 3));
}
/* アイコンのスタイル */
.list_button::before {
content:'';
position:absolute;
top:0;
bottom:0;
left:1rem;
width:calc(var(--sankakulist-size) * 3);
height:calc(var(--sankakulist-size) * 3);
margin:auto;
border-radius:50%;
background-color:#fff;
}
.list_button::after {
content:'';
position:absolute;
top:0;
bottom:0;
left:calc(1rem + var(--sankakulist-size));
width:0;
height:0;
margin:auto;
border-top:var(--sankakulist-size) solid transparent;
border-right:0 solid transparent;
border-left:calc(var(--sankakulist-size) * 1.5) solid var(--base-color);
border-bottom:var(--sankakulist-size) solid transparent;
box-sizing:border-box;
}
.list_button:hover {
background:var(--hover-color);
}
.list_button:hover:after {
border-left:calc(var(--sankakulist-size) * 1.5) solid var(--hover-color);
}
</style>
</head>
<body>
<div id="container">
<a href="" class="list_button">お問い合わせ</a>
</div>
</body>
</html>
CSS変数を使用して、大きさ・色を設定しています。
変更する場合は、「:root」の 値を変更してください。
- –sankakulist-size（大きさ）
- –base-color（色）
- –hover-color（マウスを乗せたときの色）
