【コピペで完成】HTML・CSSでつくるシンプルかつおしゃれなボタン47選

シンプルなボタン

スタンダード×枠線あり

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-001">ボタンデザイン</button>

.button-001 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

スタンダード×交差する枠線

基調色：#2589d0

<button class="button-045">ボタンデザイン</button>

.button-045 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border-top: 1px solid #2589d0;
    border-right: none;
    border-bottom: 1px solid #2589d0;
    border-left: none;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-045::before,
.button-045::after {
    position: absolute;
    width: 1px;
    height: 140%;
    background-color: #2589d0;
    content: '';
}

.button-045::before {
    left: calc(3.1em / 5 - 1px);
}

.button-045::after {
    right: calc(3.1em / 5 - 1px);
}

平行四辺形

基調色：#2589d0
矢印アイコンなしあり

「skew」で傾斜を付けたボタン。テキストを真っ直ぐのままにするために、疑似要素に傾斜を付けています。

<button class="button-039">ボタンデザイン</button>

.button-039 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-039::before {
    position: absolute;
    transform: skewX(-25deg);
    width: 100%;
    height: 100%;
    border: 1px solid #2589d0;
    content: '';
}

スタンダード×塗りつぶし

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-002">ボタンデザイン</button>

.button-002 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-002:hover {
    background-color: #1579c0;
}

立体的(シャドウ)

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-003">ボタンデザイン</button>

.button-003 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-003:hover {
    background-color: #1579c0;
}

立体的(段差)

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-004">ボタンデザイン</button>

.button-004 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    border: none;
    border-bottom: solid 5px #0059a0;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    transition: .5s ease;
}

.button-004:hover {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

グラデーション(上下)

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-043">ボタンデザイン</button>

.button-043 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(0deg, #2589d0 0%, #2589d080 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

マイクロコピー付き

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

今なら送料無料

<div class="button-005">
    <span>今なら送料無料</span>
    <button>ボタンデザイン</button>
</div>

.button-005 {
    text-align: center;
}

.button-005 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-005 button:hover {
    background-color: #1579c0;
}

.button-005 span {
    display: inline-block;
    position: relative;
    margin-bottom: 5px;
    padding: 0 25px;
    color: #cccfd7;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: .9em;
}

.button-005 span::before,
.button-005 span::after {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background-color: #d8dae1;
    content: "";
}

.button-005 span::before {
    left: 0;
    transform: rotate(50deg);
}

.button-005 span::after {
    right: 0;
    transform: rotate(-50deg);
}

吹き出し付き

基調色：#2589d0
ボタンの形状四角角丸

今なら送料無料

<div class="button-011">
    <div>今なら送料無料</div>
    <button>ボタンデザイン</button>
</div>

.button-011 {
    text-align: center;
}

.button-011 div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform: translateY(7px);
    width: 150px;
    margin: 0 auto;
    padding: .2em 0;
    border: 2px solid #2589d0;
    border-radius: 10px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
    background-color: #fff;
    color: #2589d0;
    font-size: .8em;
}

.button-011 div::before,
.button-011 div::after {
    position: absolute;
    top: 100%;
    content: '';
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
}


.button-011 div::before {
    width: 16px;
    height: 8px;
    background-color: #2589d0;
}

.button-011 div::after {
    width: 12px;
    height: 6px;
    background-color: #fff;
}

.button-011 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-011 button::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.button-010 button:hover {
    background-color: #1579c0;
}

光るアニメーション付き

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-010">ボタンデザイン</button>

.button-010 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-010::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    transform: rotate(30deg);
    width: 70px;
    height: 100px;
    content: '';
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: animation-button-010 2s infinite linear;
}

@keyframes animation-button-010 {
    17% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

.button-010:hover {
    background-color: #1579c0;
}

ホバーで動くボタン

色が反転

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

ホバーすると背景色が基調色となるボタン。シンプルながらもしっかりと目を引くことができます。

<button class="button-036">ボタンデザイン</button>

.button-036 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-036:hover {
    border: none;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
}

横にスライド

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

背景が横からスライドしてくるボタン。矢印アイコンとの親和性も高めです。

<button class="button-029">ボタンデザイン</button>

.button-029 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    overflow: hidden;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-029:hover {
    background-color: transparent;
    color: #fff;
}

.button-029::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #2589d0;
    content: '';
    transition: width .3s ease;
}

.button-029:hover::before {
    width: 100%;
}

狭まりながら塗りつぶす

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-031">ボタンデザイン</button>

.button-031 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
    transition: box-shadow .3s ease;
}

.button-031:hover {
    box-shadow: inset #2589d0 0 0 0 1.6em;
    color: #fff;
}

対角線上に広がる

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-032">ボタンデザイン</button>

.button-032 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    overflow: hidden;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-032:hover {
    background-color: transparent;
    color: #fff;
}

.button-032::before {
    position: absolute;
    z-index: -1;
    transform: rotate(-30deg);
    width: 100%;
    height: 0;
    border-radius: 5px;
    background-color: #2589d0;
    content: '';
    transition: height .3s ease;
}

.button-032:hover::before {
    height: 350%;
}

波紋

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-030">ボタンデザイン</button>

.button-030 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:0 auto;
    padding: .8em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-030:hover {
    animation: anima-button-030 1s;
}

@keyframes anima-button-030 {
    0% {
        box-shadow: 0 0 0 0 rgb(37 137 208 / 50%);
    }
    100% {
        box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
    }
}

枠線を描画

基調色：#2589d0
矢印アイコンなしあり

<button class="button-033">ボタンデザイン</button>

.button-033 {
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    color: #2589d0;
    font-size: 1em;
}

.button-033::before,
.button-033::after {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 1px;
    content: '';
}

.button-033::before {
    top: -1px;
    left: 0;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}

.button-033::after {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
}

.button-033:hover::before,
.button-033:hover::after {
    width: 100%;
    height: 100%;
    border-color: #2589d0;
    transition: width .3s ease, height .3s .3s ease;
}

バウンド

<button class="button-041">ボタンデザイン</button>

.button-041 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-041:hover {
    animation: anima-button-041 2s linear infinite;
}

@keyframes anima-button-041 {
    7% {
        transform: translateY(-15px);
    }
    15% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-7px);
    }
    25% {
        transform: translateY(0);
    }
}

震える

<button class="button-038">ボタンデザイン</button>

.button-038 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-038:hover {
    animation: anime-button-038 .3s linear infinite;
}

@keyframes anime-button-038 {
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
}

クリックで動くボタン

ローディング

基調色：#2589d0
ボタンの形状四角角丸
矢印アイコンなしあり

クリックするとローディングアニメーションが表示されるボタン。JavaScriptを使わないので、単純なリンクとしてボタンを設置する際などにおすすめです。

<button class="button-037">ボタンデザイン</button>

.button-037 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-037:focus {
    color: transparent;
}

.button-037:focus::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22%232589d0%22%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(0%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(45%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220.125s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(90%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220.25s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(135%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220.375s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(180%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220.5s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(225%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220.625s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(270%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220.75s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(315%2016%2016)%22%20opacity%3D%22.1%22%3E%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20begin%3D%220.875s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%20%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat center / 1.7em;
    content: '';
}

汎用的なボタン

コピー(リンク)

背景色：#2589d0
ロゴの色：#ffffff
ボタンの形状円四角

現在のページのURLをコピーするボタンとしてよく見かけるものです。SNSのボタンと並べる場合、グレー系の色にして他のボタンを際立たせるのがおすすめです。

<button class="button-028" aria-label="link">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#ffffff" d="M15.3 8.7c2.8 2.8 2.8 7.3 0 10.1l-3.1 3.1c-2.8 2.8-7.3 2.8-10.1 0s-2.8-7.3 0-10.1l1.7-1.7c.5-.5 1.3-.2 1.3.5 0 .8.2 1.7.5 2.5.1.3 0 .6-.2.8l-.6.6c-1.3 1.3-1.4 3.5-.1 4.8 1.3 1.3 3.5 1.3 4.8 0l3.1-3.1c1.3-1.3 1.3-3.5 0-4.8-.2-.2-.3-.3-.5-.4-.2-.1-.3-.4-.3-.6 0-.5.2-1 .5-1.4l1-1c.3-.3.7-.3 1-.1.4.2.7.5 1 .8zm6.6-6.6c-2.8-2.8-7.3-2.8-10.1 0L8.7 5.2C6 8 5.9 12.5 8.7 15.3c.3.3.6.6 1 .8.3.2.7.2 1-.1l1-1c.4-.4.6-.9.5-1.4 0-.2-.1-.5-.3-.6-.1-.1-.3-.2-.5-.4-1.3-1.3-1.3-3.5 0-4.8l3.1-3.1c1.3-1.3 3.5-1.3 4.8 0 1.3 1.3 1.3 3.5-.1 4.8l-.6.6c-.2.2-.3.5-.2.8.3.8.4 1.6.5 2.5 0 .7.8 1 1.3.5l1.7-1.7c2.8-2.8 2.8-7.3 0-10.1z"/>
    </svg>
</button>

.button-028 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #2589d0;
}

.button-028:hover {
    border: 1px solid #2589d0;
    background-color: #fff;
}

.button-028:hover path {
    fill: #2589d0;
}

コピー(コード)

背景色：#2589d0
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-018" aria-label="copy">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#ffffff" d="M16.5 21v1.9c0 .6-.5 1.1-1.1 1.1H2.6c-.6 0-1.1-.5-1.1-1.1V5.6c0-.6.5-1.1 1.1-1.1H6v13.9C6 19.8 7.2 21 8.6 21h7.9zm0-16.1V0H8.6C8 0 7.5.5 7.5 1.1v17.2c0 .6.5 1.1 1.1 1.1h12.8c.6 0 1.1-.5 1.1-1.1V6h-4.9c-.6 0-1.1-.5-1.1-1.1zm5.7-1.5L19.1.3c-.2-.2-.5-.3-.8-.3H18v4.5h4.5v-.3c0-.3-.1-.6-.3-.8z"/>
    </svg>
</button>

.button-018 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #2589d0;
}

.button-018:hover {
    border: 1px solid #2589d0;
    background-color: #fff;
}

.button-018:hover path {
    fill: #2589d0;
}

メニュー

背景色：#2589d0
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-019" aria-label="menu">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#ffffff" d="M.9 3.9h22.3c.4 0 .8-.4.8-.9V.9c0-.5-.4-.9-.9-.9H.9C.4 0 0 .4 0 .9V3c0 .5.4.9.9.9zm0 8.5h22.3c.5 0 .9-.4.9-.9V9.4c0-.5-.4-.9-.9-.9H.9c-.5.1-.9.5-.9.9v2.1c0 .5.4.9.9.9zm0 8.6h22.3c.5 0 .9-.4.9-.9V18c0-.5-.4-.9-.9-.9H.9c-.5 0-.9.4-.9.9v2.1c0 .5.4.9.9.9z"/>
    </svg>
</button>

.button-019 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #2589d0;
}

.button-019:hover {
    border: 1px solid #2589d0;
    background-color: #fff;
}

.button-019:hover path {
    fill: #2589d0;
}

ページトップへ戻る

背景色：#2589d0
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-020" aria-label="scrollTop">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#ffffff" d="m12.9 5.1 10.7 10.7c.5.5.5 1.4 0 1.9l-1.2 1.2c-.5.5-1.3.5-1.9 0L12 10.4l-8.5 8.5c-.5.5-1.3.5-1.9 0L.4 17.7c-.5-.5-.5-1.4 0-1.9L11.1 5.1c.5-.5 1.3-.5 1.8 0z"/>
    </svg>
</button>

.button-020 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #2589d0;
}

.button-020:hover {
    border: 1px solid #2589d0;
    background-color: #fff;
}

.button-020:hover path {
    fill: #2589d0;
}

SNSシェアボタン

Twitter

ボタンの形状円四角

<button class="button-006" aria-label="Twitter">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="29" height="29">
        <path fill="#fff" d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>
    </svg>
</button>

.button-006 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #1da1f2;
}

.button-006:hover {
    border: 1px solid #1da1f2;
    background-color: #fff;
}

.button-006:hover path {
    fill: #1da1f2;
}

Twitter(白背景×シャドウ)

ボタンの形状角丸円

<button class="button-042" aria-label="Twitter">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30">
        <path fill="#1da1f2"
              d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>
    </svg>
</button>

.button-042 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 7px 15px -5px rgb(0 0 0 / 15%);
    background-color: #fff;
    transition: transform .3s, box-shadow .3s;
}

.button-042:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 7px 20px -5px rgb(0 0 0 / 20%);
}

Twitter(横長)

ボタンの形状四角角丸
テキストの有無ありなし

横長にしたTwitter用のボタン。ロゴだけでなく「ツイート」という文言を入れておくことで、多少シェア率の向上が見込めるかもしれません。

<button class="button-034">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path fill="#ffffff"
              d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>
    </svg>
    <span>ツイート</span>
</button>

.button-034 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 5px;
    width: 120px;
    margin: 0 auto;
    padding: .7em;
    border: none;
    border-radius: 5px;
    background-color: #1da1f2;
    color: #fff;
    font-size: .8em;
}

.button-034:hover {
    border: 1px solid #1da1f2;
    background-color: #fff;
}

.button-034 svg {
    width: 1.5em;
    height: 1.5em;
}

.button-034 span {
    font-weight: 600;
}

.button-034:hover path {
    fill: #1da1f2;
}

.button-034:hover span {
    color: #1da1f2;
}

Facebook

背景色：#1877f2
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-007" aria-label="Facebook">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="39" height="29">
        <path fill="#ffffff" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/>
    </svg>
</button>

.button-007 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #1877f2;
}

.button-007:hover {
    border: 1px solid #1877f2;
    background-color: #fff;
}

.button-007:hover path {
    fill: #1877f2;
}

YouTube

ボタンの形状円四角

<button class="button-008" aria-label="YouTube">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="29" height="29">
        <path fill="#fff" d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5-6-3.5v7z"/>
    </svg>
</button>

.button-008 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #da1725;
}

.button-008:hover {
    border: 1px solid #da1725;
    background-color: #fff;
}

.button-008:hover path {
    fill: #da1725;
}

LINE

ボタンの形状円四角

<button class="button-009" aria-label="LINE">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="29" height="29">
        <path fill="#fff" d="M18.663 10.84a.526.526 0 0 1-.526.525h-1.462v.938h1.462a.525.525 0 1 1 0 1.049H16.15a.526.526 0 0 1-.522-.524V8.852c0-.287.235-.525.525-.525h1.988a.525.525 0 0 1-.003 1.05h-1.462v.938h1.462c.291 0 .526.237.526.525zm-4.098 2.485a.538.538 0 0 1-.166.025.515.515 0 0 1-.425-.208l-2.036-2.764v2.45a.525.525 0 0 1-1.047 0V8.852a.522.522 0 0 1 .52-.523c.162 0 .312.086.412.211l2.052 2.775V8.852c0-.287.235-.525.525-.525.287 0 .525.238.525.525v3.976a.524.524 0 0 1-.36.497zm-4.95.027a.526.526 0 0 1-.523-.524V8.852c0-.287.236-.525.525-.525.289 0 .524.238.524.525v3.976a.527.527 0 0 1-.526.524zm-1.53 0H6.098a.528.528 0 0 1-.525-.524V8.852a.527.527 0 0 1 1.05 0v3.45h1.464a.525.525 0 0 1 0 1.05zM12 2.572c-5.513 0-10 3.643-10 8.118 0 4.01 3.558 7.369 8.363 8.007.325.068.769.215.881.492.1.25.066.638.032.9l-.137.85c-.037.25-.2.988.874.537 1.076-.449 5.764-3.398 7.864-5.812C21.313 14.089 22 12.477 22 10.69c0-4.475-4.488-8.118-10-8.118z"/>
    </svg>
</button>

.button-009 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #00b900;
}

.button-009:hover {
    border: 1px solid #00b900;
    background-color: #fff;
}

.button-009:hover path {
    fill: #00b900;
}

はてなブックマーク

背景色：#00a4de
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-015" aria-label="はてなブックマーク">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#ffffff"
              d="M14.5 12.7c-.9-.9-2-1.5-3.3-1.5 1.1-.2 2-.7 2.8-1.5.6-.8.9-1.7.9-2.7 0-.8-.2-1.7-.6-2.4-.4-.7-1-1.3-1.7-1.6-.7-.4-1.5-.6-2.3-.7C8.7 2 7.1 2 5.5 2H0v20h5.7c1.7 0 3.3 0 4.9-.2.9-.1 1.7-.4 2.5-.8s1.5-1.1 1.9-1.9c.5-.9.7-1.9.7-2.8.1-1.4-.4-2.6-1.2-3.6zM5.1 6.4h1.2c1.4 0 2.2.1 2.7.4.5.4.8 1 .7 1.6 0 .6-.2 1.2-.7 1.5-.5.3-1.4.4-2.8.4H5.1V6.4zm4.6 11.4c-.5.3-1.5.5-2.7.5H5.1V14h2c1.3 0 2.2.1 2.7.5s.8 1.1.7 1.8c.1.6-.2 1.2-.8 1.5zM21.5 16.9c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.2-2.5-2.5-2.5zM19.3 2h4.4v13.3h-4.4z"/>
    </svg>
</button>

.button-015 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #00a4de;
}

.button-015:hover {
    border: 1px solid #00a4de;
    background-color: #fff;
}

.button-015:hover path {
    fill: #00a4de;
}

Pinterest

背景色：#bd081c
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-027" aria-label="Pinterest">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="29" height="29">
        <path fill="#ffffff" d="M12.6 0c-5 0-9.8 3.3-9.8 8.6 0 3.4 1.9 5.3 3.1 5.3.5 0 .8-1.3.8-1.7 0-.4-1.1-1.4-1.1-3.3 0-3.9 2.9-6.6 6.8-6.6 3.3 0 5.7 1.9 5.7 5.3 0 2.6-1 7.3-4.3 7.3-1.2 0-2.2-.9-2.2-2.1 0-1.8 1.3-3.6 1.3-5.5 0-3.2-4.5-2.6-4.5 1.2 0 .8.1 1.7.5 2.4-.7 2.9-2 7.1-2 10.1 0 .9.1 1.8.2 2.7-.2.3-.3.3 0 .2 2.4-3.3 2.3-4 3.4-8.3.6 1.1 2.1 1.7 3.3 1.7 5.1 0 7.4-5 7.4-9.5 0-4.7-4.1-7.8-8.6-7.8z"/>
    </svg>
</button>

.button-027 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #bd081c;
}

.button-027:hover {
    border: 1px solid #bd081c;
    background-color: #fff;
}

.button-027:hover path {
    fill: #bd081c;
}

Pocket

背景色：#ee4056
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-026" aria-label="Pocket">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21.4" width="24" height="24">
        <path fill="#ffffff" d="M21.8 0H2.2C1 0 0 1 0 2.2v7.2c0 6.7 5.3 12 12 12 6.6 0 12-5.3 12-12V2.2C24 1 23.1 0 21.8 0zm-8.6 14.4c-.7.6-1.7.6-2.3 0-6.1-5.8-6.2-5.6-6.2-6.6 0-.9.7-1.6 1.6-1.6.9 0 .9.2 5.6 4.8 4.9-4.7 4.7-4.8 5.7-4.8s1.6.7 1.6 1.6c.1.9 0 .8-6 6.6z"/>
    </svg>
</button>

.button-026 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #ee4056;
}

.button-026:hover {
    border: 1px solid #ee4056;
    background-color: #fff;
}

.button-026:hover path {
    fill: #ee4056;
}

RSS

背景色：#ee802f
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-017" aria-label="RSS">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="#ffffff" d="M6.9 20.6c0 1.9-1.5 3.4-3.4 3.4S0 22.5 0 20.6s1.5-3.4 3.4-3.4 3.5 1.5 3.5 3.4zm9.4 2.5C15.8 14.8 9.2 8.2.9 7.7c-.5 0-.9.4-.9.9v2.6c0 .4.3.8.8.8 6 .4 10.8 5.2 11.2 11.2 0 .4.4.8.9.8h2.6c.4 0 .8-.4.8-.9zm7.7 0C23.5 10.6 13.5.5.9 0 .4 0 0 .4 0 .9v2.6c0 .5.4.8.8.9C11 4.8 19.3 13 19.7 23.3c0 .5.4.8.9.8h2.6c.4-.1.8-.5.8-1z"/>
    </svg>
</button>

.button-017 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #ee802f;
}

.button-017:hover {
    border: 1px solid #ee802f;
    background-color: #fff;
}

.button-017:hover path {
    fill: #ee802f;
}

GitHub

ボタンの形状円四角

プロフィール欄などに載せるのに適したGitHubのボタン。利用する際はGitHub ロゴのポリシーに反しないように気を付けてください。

<button class="button-009" aria-label="GitHub">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M11.8.2C5.2.2-.2 5.6-.2 12.3c0 5.3 3.4 9.9 8.2 11.5.6.1.8-.3.8-.6V21c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.8 0-.8 0-.8 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2 0-.3-.4-1.5.2-3.2 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.6 3.3-1.2 3.3-1.2.7 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.8-1.6 8.2-6.1 8.2-11.5.1-6.6-5.3-12-11.9-12z"
              fill="#fff"/>
    </svg>
</button>

.button-009 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #24292f;
}

.button-009:hover {
    border: 1px solid #24292f;
    background-color: #fff;
}

.button-009 svg {
    width: 29px;
    height: 29px;
}

.button-009:hover path {
    fill: #24292f;
}

WordPress

背景色：#21759b
ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-016" aria-label="WordPress">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="29" height="29">
        <path fill="#ffffff"
              d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zM1.2 12c0-1.6.3-3 .9-4.4l5.1 14.1c-3.5-1.7-6-5.4-6-9.7zM12 22.8c-1.1 0-2.1-.2-3-.4l3.2-9.4 3.3 9.1c0 .1 0 .1.1.1-1.1.4-2.3.6-3.6.6zm1.5-15.9c.6 0 1.2-.1 1.2-.1.6-.1.5-.9-.1-.9 0 0-1.7.1-2.9.1-1 .1-2.8 0-2.8 0-.6 0-.6.9-.1.9 0 0 .6.1 1.1.1l1.7 4.6-2.4 7.1L5.4 6.9c.6 0 1.2-.1 1.2-.1.6 0 .5-.9 0-.8 0 0-1.7.1-2.9.1H3c1.9-2.9 5.2-4.9 9-4.9 2.8 0 5.4 1.1 7.3 2.8h-.1c-1.1 0-1.8.9-1.8 1.9 0 .9.5 1.6 1.1 2.5.4.7.9 1.6.9 3 0 .9-.4 2-.8 3.5l-1.1 3.6-4-11.6zm3.9 14.4 3.3-9.5c.6-1.5.8-2.8.8-3.9 0-.4 0-.8-.1-1.1.8 1.5 1.3 3.3 1.3 5.2.1 4-2.1 7.5-5.3 9.3z"/>
    </svg>
</button>

.button-016 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #21759b;
}

.button-016:hover {
    border: 1px solid #21759b;
    background-color: #fff;
}

.button-016:hover path {
    fill: #21759b;
}

Instagram

ロゴの色：#ffffff
ボタンの形状円四角

<button class="button-012" aria-label="Instagram">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="29" height="29">
        <path fill="#ffffff" d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0-2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm6.5-.25a1.25 1.25 0 0 1-2.5 0 1.25 1.25 0 0 1 2.5 0zM12 4c-2.474 0-2.878.007-4.029.058-.784.037-1.31.142-1.798.332-.434.168-.747.369-1.08.703a2.89 2.89 0 0 0-.704 1.08c-.19.49-.295 1.015-.331 1.798C4.006 9.075 4 9.461 4 12c0 2.474.007 2.878.058 4.029.037.783.142 1.31.331 1.797.17.435.37.748.702 1.08.337.336.65.537 1.08.703.494.191 1.02.297 1.8.333C9.075 19.994 9.461 20 12 20c2.474 0 2.878-.007 4.029-.058.782-.037 1.309-.142 1.797-.331.433-.169.748-.37 1.08-.702.337-.337.538-.65.704-1.08.19-.493.296-1.02.332-1.8.052-1.104.058-1.49.058-4.029 0-2.474-.007-2.878-.058-4.029-.037-.782-.142-1.31-.332-1.798a2.911 2.911 0 0 0-.703-1.08 2.884 2.884 0 0 0-1.08-.704c-.49-.19-1.016-.295-1.798-.331C14.925 4.006 14.539 4 12 4zm0-2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2z"/>
    </svg>
</button>

.button-012 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}

.button-012::before {
    position: absolute;
    top: 23px;
    left: -18px;
    width: 60px;
    height: 60px;
    background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
    background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
    content: '';
}

.button-012 svg {
    z-index: 1;
}

グラデーションボタン

紫+青+水色

ボタンの形状四角角丸

<button class="button-022">ボタンデザイン</button>

.button-022 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(144deg, #af40ff, #5b42f2 50%, #00ddeb);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

青マゼンタ+水色

ボタンの形状四角角丸

<button class="button-023">ボタンデザイン</button>

.button-023 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(45deg, #bdb9ff, #67b7ff);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

橙色+オレンジ色

ボタンの形状四角角丸

<button class="button-024">ボタンデザイン</button>

.button-024 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(45deg, #ffc107, #ff7b5f);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

ピンク+赤

ボタンの形状四角角丸

<button class="button-025">ボタンデザイン</button>

.button-025 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    background-image: linear-gradient(120deg, #f094fb, #f5576c);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

その他のボタン

ストライプ背景×枠線

<button class="button-044">ボタンデザイン</button>

.button-044 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: 1px solid #333333;
    border-radius: 5px;
    background-image: repeating-linear-gradient(-45deg, #eee, #eee 1px, #ffffff 1px, #ffffff 4px);
    color: #333333;
    font-weight: 600;
    font-size: 1em;
    transition: box-shadow .3s;
}

.button-044:hover {
    box-shadow: 0 7px 30px -5px rgb(0 0 0 / 20%);
}

白背景×シャドウ

ボタンの形状四角角丸
矢印アイコンなしあり

<button class="button-040">ボタンデザイン</button>

.button-040 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .8em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 7px 10px rgb(0 0 0 / 10%);
    background-color: #fff;
    color: #333;
    font-size: 1em;
    transition: transform .3s, box-shadow .3s;
}

.button-040:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 10px rgb(0 0 0 / 15%);
}

ニューモーフィズム風

文字色：#555555
ボタンの形状四角角丸

<button class="button-021">ボタンデザイン</button>

.button-021 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    padding: 1em 2em;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #fff;
    background-color: #e7e7e7;
    color: #555555;
    font-weight: 600;
}

.button-021:hover {
    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #fff;
}

コントラスト強め

基調色：#ffff00
ボタンの形状四角角丸

<button class="button-014">
    <span>ボタン</span>
</button>

.button-014,
.button-014 span {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-014 {
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: 0;
    border-radius: 5px;
    border: none;
    font-size: 1em;
}

.button-014::before {
    position: absolute;
    top: 7px;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    border-radius: inherit;
    box-sizing: inherit;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, .2);
    background-color: #cfcf00;
    content: '';
}

.button-014 span {
    width: 100%;
    padding: .8em 2em;
    border: 2px solid #000;
    border-radius: inherit;
    background-color: #ffff00;
    color: #000;
    font-weight: 600;
    line-height: 1.5;
}

.button-014 span::after {
    display: inline-block;
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    content: '';
}

.button-014:hover::before {
    transition: box-shadow .2s;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, .2);
}

.button-014:hover span {
    transition: transform .2s;
    transform: translateY(2px);
}

クラシカル

背景色：#c0c0c0

古めのOSのUIを彷彿とさせる、クラシックなデザインのボタン。使い勝手に関しては微妙ですが、遊び心を入れたい方にはおすすめです。

<button class="button-047">ボタン</button>

.button-047 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    margin: 0 auto;
    padding: .5em 1em;
    border: none;
    box-shadow: inset -1px -1px #333, inset 1px 1px #fff, inset -2px -2px #999, inset 2px 2px #ffffff;
    background-color: #c0c0c0;
    color: #333;
    font-size: 1em;
    outline: 1px dotted #333;
    outline-offset: -4px;
}

.button-047:active {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #333, inset -2px -2px #ffffff, inset 2px 2px #999;
}

凹凸感強め

文字色：#333333

<button class="button-046">
    <span>ボタン</span>
</button>

.button-046 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    padding: 8px;
    border: none;
    border-radius: 50%;
    box-shadow: 0 10px 10px rgb(0 0 0 / 20%);
    background-image: linear-gradient(0, #ddd, #fff);
    color: #333333;
    font-weight: 600;
    font-size: .9em;
    transition: transform .3s, box-shadow .3s;
}

.button-046:hover {
    transform: scale(.99);
    box-shadow: 0 5px 5px rgb(0 0 0 / 20%);
}

.button-046 span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(0, #fff, #ddd);
    line-height: 64px;
}

リアルな円形

背景色：#1579c0
文字色：#ffffff

<button class="button-013">ボタン</button>

.button-013 {
    width: 80px;
    height: 80px;
    border: none;
    border-bottom: solid 2px #c0c0c0;
    border-radius: 50%;
    box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.5), 0 3px 7px rgba(0, 0, 0, .2);
    background-image: linear-gradient(#1579c0 0%, #0569b0 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 1em;
}