記事公開日: 2024年5月15日

白い丸の中に三角マーク付いたボタンを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（マウスを乗せたときの色）

白い丸の中に三角マーク付いたボタンをCSSだけで実装する

関連情報