HTML・CSSでつくるおしゃれなボタンデザイン62選

2022/8/172023/3/7

キラーページへのリンクや主要機能のトリガーとしてなど、重要な導線を表示するのに使われるボタン。どうせならよりクリックされるものにしたいですよね。そこで今回はシンプルなものからおしゃれなものまで、様々なボタンのデザインスニペットをまとめました。ぜひご自身のサイトと親和性の高いものを選んでみてください。

線状のボタン

シンプル

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

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

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

細い矢印

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

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

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

.button-054::after {
    position: absolute;
    right: 2em;
    transform: translateY(-50%);
    transform-origin: left;
    width: 2em;
    height: .5em;
    background-color: #2589d0;
    clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
    content: '';
    transition: transform .3s;
}

.button-054:hover::after {
    transform: translateY(-50%) scaleX(1.4);
}

交差する枠線

基調色：#2589d0

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

.button-045 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .9em 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: .9em 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: .9em 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: .9em 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: .9em 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-049">ボタンデザイン</button>

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

グラデーション(上下)

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

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

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

冠草

基調色：#2589d0
冠草の透明度：0.4
ボタンの形状四角角丸

花冠を両端にあしらった、高級感溢れるボタン。ランキングページなどへの導線として使うとより効果的です。

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

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

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

.button-053::before,
.button-053::after {
    display: inline-block;
    position: absolute;
    width: 25px;
    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%20100%20163.393%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M65.999%20132.255c.429%202.511%201.4%204.78%202.643%206.713%201.244%201.929%202.756%203.517%204.208%204.751.365.305.724.591%201.073.86.351.264.696.5%201.024.723.655.45%201.262.795%201.771%201.079.255.139.485.268.69.366.205.1.382.183.526.249.289.132.449.197.449.197s.143-.716.292-1.937c.075-.61.153-1.347.219-2.181.033-.417.064-.859.091-1.322l.037-.71.031-.744a65.77%2065.77%200%200%200-.099-6.699%2054.703%2054.703%200%200%200-.149-1.791%2053.02%2053.02%200%200%200-.206-1.81c-.04-.301-.083-.6-.129-.899-.046-.298-.096-.594-.146-.896a35.134%2035.134%200%200%200-.347-1.772%2035.547%2035.547%200%200%200-1.903-6.054%2032.948%2032.948%200%200%200-2.146-4.301%2018.983%2018.983%200%200%200-.506-.812%2016.995%2016.995%200%200%200-.47-.717l-.432-.608a13.29%2013.29%200%200%200-.549-.711l-.148-.187a8.849%208.849%200%200%200-.242-.287c-.135-.153-.213-.23-.213-.23s-.402.607-1.009%201.665a43.006%2043.006%200%200%200-2.202%204.405%2034.97%2034.97%200%200%200-1.112%202.961%2030.439%2030.439%200%200%200-.48%201.634%2026.556%2026.556%200%200%200-.669%203.488%2021.352%2021.352%200%200%200-.113%203.696c.041.622.113%201.25.219%201.882ZM57.056%20147.622c2.771-.655%205.457-.957%207.945-1.088a64.066%2064.066%200%200%201%206.757-.001%2042.4%2042.4%200%200%201%201.414.086c.45.031.879.058%201.28.095.801.078%201.509.141%202.089.215l.777.103c.228.029.422.056.579.08.315.047.484.081.484.081s-.263.68-.814%201.782a32.084%2032.084%200%200%201-2.587%204.289%2029.107%2029.107%200%200%201-2.065%202.556c-.392.431-.81.865-1.252%201.289a24.966%2024.966%200%200%201-2.975%202.429%2021.998%2021.998%200%200%201-2.669%201.57c-.319.16-.646.314-.977.456a22.56%2022.56%200%200%201-2.085.778c-2.896.907-5.992%201.178-8.968%201.001-2.975-.177-5.819-.808-8.257-1.579a50.076%2050.076%200%200%201-1.751-.598%2050.968%2050.968%200%200%201-2.291-.934c-.23-.103-.45-.207-.663-.307a51.507%2051.507%200%200%201-1.169-.571l-.501-.256-.437-.24a41.288%2041.288%200%200%201-.689-.392%2021.676%2021.676%200%200%201-.574-.344s.503-.533%201.449-1.344a40.297%2040.297%200%200%201%204.067-3.045%2045.183%2045.183%200%200%201%204.466-2.602%2045.43%2045.43%200%200%201%201.711-.832c.586-.27%201.188-.53%201.802-.778.306-.123.619-.246.935-.368a39.645%2039.645%200%200%201%202.924-.986%2033.483%2033.483%200%200%201%202.043-.544ZM51.697%20121.679c-.216%202.434.121%204.778.787%206.88.67%202.096%201.664%203.948%202.689%205.459.52.746%201.033%201.427%201.532%201.996.247.288.485.555.711.8.229.239.446.456.645.651.399.388.725.692.96.883.233.195.364.296.364.296s.317-.622.77-1.708a49.65%2049.65%200%200%200%20.765-1.952%2059.162%2059.162%200%200%200%201.721-5.475c.135-.518.27-1.054.398-1.599a54.35%2054.35%200%200%200%20.678-3.353%2044.157%2044.157%200%200%200%20.367-2.591c.031-.287.064-.581.09-.871.054-.581.093-1.159.115-1.731a32.852%2032.852%200%200%200-.297-6.127%2031.112%2031.112%200%200%200-1.267-5.468c-.049-.138-.094-.276-.138-.409-.045-.133-.09-.26-.135-.383-.089-.246-.182-.47-.265-.679a13.189%2013.189%200%200%200-.445-1.023c-.063-.13-.114-.243-.159-.333-.089-.179-.144-.272-.144-.272s-.519.465-1.337%201.301a41.25%2041.25%200%200%200-3.097%203.551c-1.159%201.504-2.381%203.324-3.358%205.371a24.158%2024.158%200%200%200-.692%201.586c-.209.539-.4%201.094-.57%201.662a18.073%2018.073%200%200%200-.691%203.541Z%22%2F%3E%3Cpath%20d%3D%22M39.624%20133.673c2.719.072%205.269.457%207.596.957a57.356%2057.356%200%200%201%206.228%201.704c.902.288%201.71.592%202.438.854.362.135.699.266%201.009.393.314.121.602.235.861.342.519.213.92.401%201.201.521.279.124.427.198.427.198s-.419.559-1.212%201.432a31.1%2031.1%200%200%201-3.489%203.282%2028.488%2028.488%200%200%201-2.56%201.831c-.473.3-.965.588-1.479.864a23.654%2023.654%200%200%201-3.355%201.486%2022.251%2022.251%200%200%201-2.852.78%2021.552%2021.552%200%200%201-3.121.373c-2.883.115-5.785-.395-8.467-1.28-2.68-.887-5.128-2.15-7.174-3.44a50.331%2050.331%200%200%201-1.455-.97c-.232-.158-.453-.32-.666-.48a43.728%2043.728%200%200%201-.623-.471c-.401-.31-.779-.604-1.12-.89a47.55%2047.55%200%200%201-1.672-1.481c-.214-.201-.391-.38-.536-.525-.289-.29-.441-.454-.441-.454s.594-.372%201.664-.895a35.267%2035.267%200%200%201%201.942-.876%2041.732%2041.732%200%200%201%202.557-.967%2044.42%2044.42%200%200%201%206.536-1.688%2040.314%2040.314%200%200%201%201.852-.283%2037.073%2037.073%200%200%201%203.894-.317%2031.509%2031.509%200%200%201%202.016-.002ZM40.55%20107.689c-.794%202.196-1.066%204.449-.972%206.554a20.714%2020.714%200%200%200%201.111%205.714c.068.209.144.407.219.603a27.447%2027.447%200%200%200%20.569%201.378l.118.249c.156.326.31.631.456.913.147.282.286.541.423.768a24.273%2024.273%200%200%200%20.848%201.333l.069.092s.113-.123.312-.356c.199-.233.485-.577.834-1.019a51.022%2051.022%200%200%200%202.646-3.706%2059.233%2059.233%200%200%200%201.538-2.503%2052.049%2052.049%200%200%200%201.521-2.809%2044.76%2044.76%200%200%200%201.391-3.018l.314-.776a34.03%2034.03%200%200%200%20.833-2.359%2030.907%2030.907%200%200%200%201.224-5.774%2029.29%2029.29%200%200%200%20.187-4.52%2023.812%2023.812%200%200%200-.275-3.018%2010.857%2010.857%200%200%200-.157-.825c-.023-.094-.037-.168-.049-.217l-.018-.075s-.593.304-1.552.879a38.596%2038.596%200%200%200-3.717%202.532%2032.765%2032.765%200%200%200-2.221%201.874%2026.96%2026.96%200%200%200-2.188%202.281c-1.409%201.66-2.654%203.598-3.462%205.805ZM26.447%20115.774c2.491.729%204.74%201.717%206.761%202.754a53.537%2053.537%200%200%201%205.306%203.129c.184.127.371.248.55.368a38.73%2038.73%200%200%201%201.246.875l.23.162c.301.214.579.42.834.614l.7.539a24.818%2024.818%200%200%201%201.313%201.079s-.132.102-.384.279c-.252.177-.622.43-1.098.728a29.88%2029.88%200%200%201-4.046%202.128c-.857.369-1.808.732-2.821%201.036a24.166%2024.166%200%200%201-3.264.748%2021.448%2021.448%200%200%201-4.111.235%2020.602%2020.602%200%200%201-3.437-.457c-2.678-.602-5.207-1.785-7.45-3.248-2.239-1.465-4.171-3.217-5.736-4.892a36.03%2036.03%200%200%201-3.513-4.468%2038.276%2038.276%200%200%201-.884-1.406c-.1-.166-.17-.298-.22-.387l-.073-.135s.639-.199%201.752-.423a37.26%2037.26%200%200%201%204.605-.618c.949-.07%201.97-.111%203.048-.11a40.122%2040.122%200%200%201%203.389.135c2.34.194%204.827.6%207.302%201.337ZM33.395%2091.208a16.525%2016.525%200%200%200-1.07%201.763%2017.504%2017.504%200%200%200-.508%201.088c-.427.979-.72%201.966-.953%202.951-.109.49-.192.976-.263%201.459a18.61%2018.61%200%200%200-.092.719%2024.667%2024.667%200%200%200-.105%202.071c.004.442.019.873.043%201.289.013.208.023.413.044.612a29.653%2029.653%200%200%200%20.218%201.668c.119.68.257%201.275.379%201.768.059.248.128.464.185.654a20.102%2020.102%200%200%200%20.295.888s.541-.336%201.406-.969a47.64%2047.64%200%200%200%203.37-2.724c2.651-2.333%205.771-5.572%208.05-9.141.287-.448.55-.889.793-1.323l.356-.649a28.66%2028.66%200%200%200%201.411-3.075c.155-.39.299-.772.424-1.141.064-.185.12-.366.179-.546.061-.181.117-.358.17-.533.108-.35.195-.686.281-1.012.09-.327.166-.642.232-.942l.091-.441a17.87%2017.87%200%200%200%20.22-1.198c.016-.121.036-.24.054-.354a14.077%2014.077%200%200%200%20.11-.91l.019-.249.02-.221c.011-.137.017-.254.021-.349.008-.19.005-.292.005-.292s-.62.136-1.642.433a37.315%2037.315%200%200%200-4.052%201.437%2030.66%2030.66%200%200%200-2.493%201.189c-.428.229-.86.474-1.293.736a22.82%2022.82%200%200%200-1.288.838%2021.11%2021.11%200%200%200-2.467%202.012c-.387.374-.763.768-1.123%201.184-.359.415-.712.855-1.025%201.311ZM18.408%2095.139c.528.321%201.036.653%201.524.995l.726.517c.239.174.474.349.703.527a39.2%2039.2%200%200%201%202.569%202.17c.401.364.79.727%201.157%201.09.185.181.362.363.539.542.18.178.355.356.526.533.343.353.662.705.974%201.046.315.34.612.673.891.998l.799.939c.252.301.486.591.701.867.441.548.818%201.036%201.116%201.449.147.207.288.39.403.552a20.163%2020.163%200%200%201%20.529.772s-.589.238-1.617.544a28.941%2028.941%200%200%201-4.265.923%2025.66%2025.66%200%200%201-2.848.231%2023.98%2023.98%200%200%201-1.559-.012%2020.968%2020.968%200%200%201-5.026-.811%2019.944%2019.944%200%200%201-1.731-.605%2017.238%2017.238%200%200%201-1.737-.805%2021.041%2021.041%200%200%201-2.08-1.274%2024.492%2024.492%200%200%201-1.158-.88c-1.015-.811-1.923-1.717-2.779-2.657a30.837%2030.837%200%200%201-1.753-2.183%2041.57%2041.57%200%200%201-.516-.744%2033.394%2033.394%200%200%201-.95-1.484c-.29-.493-.562-.981-.818-1.458-.127-.239-.252-.474-.368-.707a42.898%2042.898%200%200%201-.915-1.996%2015.756%2015.756%200%200%201-.249-.61%2041.824%2041.824%200%200%201-.592-1.609l-.152-.45-.123-.402a36.015%2036.015%200%200%201-.186-.642c-.098-.352-.144-.545-.144-.545s.637-.028%201.719.035c1.082.062%202.608.215%204.381.547%203.581.658%208.106%202.033%2012.309%204.599ZM30.769%2073.316c-.414.345-.789.706-1.147%201.081s-.696.763-1.012%201.162a18.269%2018.269%200%200%200-1.254%201.847%2021.577%2021.577%200%200%200-.963%201.909c-.181.425-.341.849-.489%201.269-.074.21-.144.419-.211.626-.067.208-.121.412-.178.616-.11.407-.207.806-.292%201.194l-.062.289-.051.283a28.815%2028.815%200%200%200-.229%201.585c-.064.653-.09%201.233-.104%201.716-.003.121-.006.235-.006.343l.005.303c.005.189.011.351.018.482.013.263.026.406.026.406s.581-.168%201.536-.524a44.501%2044.501%200%200%200%203.784-1.628%2047.1%2047.1%200%200%200%204.865-2.705%2037.08%2037.08%200%200%200%202.487-1.718%2029.067%2029.067%200%200%200%202.346-1.943%2026.874%2026.874%200%200%200%203.96-4.553l.324-.48c.212-.317.407-.628.587-.932l.132-.226.133-.223a20.694%2020.694%200%200%200%20.686-1.273%2018.183%2018.183%200%200%200%20.542-1.133l.074-.174.075-.168c.196-.442.344-.832.455-1.157a8.984%208.984%200%200%200%20.332-1.034s-.603-.023-1.614.008a35.498%2035.498%200%200%200-4.071.361c-.823.122-1.688.285-2.585.504-.897.218-1.823.492-2.756.837a20.064%2020.064%200%200%200-3.427%201.66%2016.985%2016.985%200%200%200-1.914%201.39ZM16.037%2073.239a28.42%2028.42%200%200%201%202.202%202.587%2028.23%2028.23%200%200%201%201.398%201.969%2032.952%2032.952%200%200%201%201.205%201.939%2033.57%2033.57%200%200%201%201.03%201.86l.31.594a33.76%2033.76%200%200%201%20.685%201.414l.128.268a30.788%2030.788%200%200%201%20.659%201.494c.265.614.484%201.158.652%201.612l.118.323.108.286a15.891%2015.891%200%200%201%20.287.843s-.601.066-1.621.081-2.46-.021-4.143-.251a25.19%2025.19%200%200%201-2.664-.516%2022.001%2022.001%200%200%201-2.883-.935%2020.092%2020.092%200%200%201-2.934-1.481%2018.66%2018.66%200%200%201-2.822-2.148c-1.788-1.68-3.233-3.724-4.295-5.845a32.605%2032.605%200%200%201-.39-.798c-.062-.133-.125-.267-.184-.4l-.17-.401a33.383%2033.383%200%200%201-.619-1.598l-.139-.396c-.045-.132-.085-.263-.127-.394a35.066%2035.066%200%200%201-.638-2.294%2041.923%2041.923%200%200%201-.419-2.108l-.055-.327-.045-.319a40.748%2040.748%200%200%201-.242-2.21%2031.743%2031.743%200%200%201-.062-1.464c-.006-.343-.003-.529-.003-.529s.593.126%201.574.441c.981.314%202.349.817%203.902%201.544a39.31%2039.31%200%200%201%202.458%201.258c.853.476%201.728%201.01%202.601%201.604a32.683%2032.683%200%200%201%202.624%201.961c.215.179.428.361.639.548a26.659%2026.659%200%200%201%201.874%201.786ZM32.853%2055.254a15.63%2015.63%200%200%200-1.324.709%2015.708%2015.708%200%200%200-3.29%202.697c-.078.083-.157.166-.232.251l-.219.254a22.073%2022.073%200%200%200-.822%201.033c-.13.173-.256.347-.372.522a23.273%2023.273%200%200%200-.959%201.556c-.092.171-.18.34-.265.507-.34.669-.633%201.306-.851%201.888a27.734%2027.734%200%200%200-.43%201.198c-.037.12-.071.235-.103.345-.253.878-.353%201.413-.353%201.413s.574-.006%201.538-.09a41.501%2041.501%200%200%200%203.877-.532%2045.42%2045.42%200%200%200%205.129-1.26%2041.94%2041.94%200%200%200%201.351-.451c.455-.16.908-.329%201.357-.509.449-.18.893-.371%201.329-.573.441-.201.881-.413%201.307-.637a25.9%2025.9%200%200%200%201.224-.689%2021.545%2021.545%200%200%200%201.651-1.079%2021.51%2021.51%200%200%200%201.443-1.101%2025.521%2025.521%200%200%200%202.926-2.807c.192-.215.368-.424.53-.626a13.858%2013.858%200%200%200%20.852-1.091c.118-.161.228-.31.321-.446.189-.273.326-.494.416-.648l.139-.237s-.548-.167-1.486-.383a33.095%2033.095%200%200%200-3.815-.648%2028.471%2028.471%200%200%200-2.499-.164%2023.02%2023.02%200%200%200-2.725.104c-.468.046-.941.108-1.417.188-.478.08-.945.182-1.421.303-.945.244-1.903.568-2.81%201.004Z%22%2F%3E%3Cpath%20d%3D%22M19.379%2051.564c.267.485.513.97.738%201.454.232.486.45.971.646%201.453.386.962.739%201.919%201.018%202.844l.208.69a29.52%2029.52%200%200%201%20.366%201.346l.159.652c.106.43.199.85.281%201.257l.229%201.182c.141.761.235%201.461.328%202.09a29.098%2029.098%200%200%201%20.147%201.276l.039.361c.094.916.098%201.457.098%201.457s-.565-.092-1.5-.336a26.539%2026.539%200%200%201-3.717-1.274%2025.18%2025.18%200%200%201-1.136-.521%2021.46%2021.46%200%200%201-3.571-2.19%2018.811%2018.811%200%200%201-1.182-.971%2018.623%2018.623%200%200%201-2.205-2.357%2016.923%2016.923%200%200%201-.973-1.401%2017.294%2017.294%200%200%201-.849-1.52%2020.761%2020.761%200%200%201-.985-2.394%2025.547%2025.547%200%200%201-.667-2.461%2026.955%2026.955%200%200%201-.531-6.273c.014-.477.037-.937.066-1.378a39.926%2039.926%200%200%201%20.272-2.37c.054-.345.113-.663.168-.951.11-.577.212-1.035.287-1.348a7.026%207.026%200%200%201%20.127-.481s.513.259%201.333.783a31.97%2031.97%200%200%201%203.211%202.358%2034.448%2034.448%200%200%201%201.943%201.744%2034.11%2034.11%200%200%201%202.001%202.1%2033.26%2033.26%200%200%201%201.923%202.431%2028.939%2028.939%200%200%201%201.731%202.749ZM39.608%2038.282c-.953.168-1.84.442-2.691.777-.429.166-.832.356-1.227.557-.394.202-.778.416-1.148.641a17.839%2017.839%200%200%200-3.652%203.042c-.24.261-.467.519-.679.77-.211.251-.397.5-.575.735-.352.473-.654.901-.877%201.27a15.93%2015.93%200%200%200-.684%201.196s.524.142%201.423.312c.899.171%202.174.369%203.667.505.747.068%201.546.12%202.384.147.842.03%201.719.034%202.61.004.446-.015.895-.039%201.345-.072a27.329%2027.329%200%200%200%204.082-.577c3.574-.802%206.221-2.255%208.078-3.483.233-.153.45-.305.653-.453l.571-.426c.358-.27.653-.521.893-.734.492-.416.741-.692.741-.692s-.46-.284-1.265-.705a31.515%2031.515%200%200%200-3.343-1.509c-2.769-1.055-6.518-1.997-10.306-1.305Z%22%2F%3E%3Cpath%20d%3D%22M28.221%2031.59c.24%201.007.43%202.014.547%202.986.056.485.111.97.148%201.444.038.475.061.94.074%201.397.074%201.837-.024%203.523-.152%204.98-.033.364-.071.711-.113%201.042-.041.331-.075.648-.117.944-.08.593-.178%201.107-.247%201.538-.15.857-.284%201.351-.284%201.351s-.491-.229-1.279-.69a25.32%2025.32%200%200%201-3.057-2.107%2022.927%2022.927%200%200%201-1.818-1.626%2020.35%2020.35%200%200%201-1.781-2.034%2019.325%2019.325%200%200%201-.833-1.181%2017.455%2017.455%200%200%201-.751-1.288%2015.914%2015.914%200%200%201-1.202-2.917%2017.734%2017.734%200%200%201-.397-1.589%2018.614%2018.614%200%200%201-.235-1.604%2021.71%2021.71%200%200%201-.092-1.209%2025.366%2025.366%200%200%201%20.017-1.986c.022-.527.076-1.041.138-1.549.063-.508.137-1.009.225-1.497.093-.485.197-.958.308-1.419.111-.46.225-.908.357-1.332a37.915%2037.915%200%200%201%20.594-1.794c.068-.184.139-.361.207-.534.276-.69.539-1.295.772-1.791.479-.984.811-1.547.811-1.547s.407.36%201.034%201.037c.627.676%201.474%201.67%202.366%202.918%201.793%202.502%203.768%206.017%204.76%2010.058ZM50.611%2023.555a12.241%2012.241%200%200%200-1.341-.037c-.44.012-.875.044-1.304.093-.432.047-.846.122-1.255.209-.409.087-.811.189-1.204.303a17.528%2017.528%200%200%200-1.677.607l-.266.113-.257.119a21.488%2021.488%200%200%200-1.448.755%2021.785%2021.785%200%200%200-1.614%201.058%2022.985%2022.985%200%200%200-1.459%201.19c-.597.554-.918.916-.918.916s.439.262%201.211.644c.772.383%201.877.886%203.196%201.385.658.248%201.376.5%202.133.738a35.069%2035.069%200%200%200%202.986.793%2026.979%2026.979%200%200%200%201.906.355c.428.064.858.117%201.288.158a20.704%2020.704%200%200%200%202.57.106c.415-.005.818-.024%201.209-.054a22.648%2022.648%200%200%200%202.214-.28c.342-.066.683-.129%201.008-.201.325-.072.636-.151.934-.235.301-.08.593-.161.869-.248.277-.085.537-.178.789-.266.507-.172.955-.354%201.348-.526.399-.165.737-.325%201.011-.465.272-.143.491-.253.636-.337.145-.082.221-.131.221-.131s-.353-.368-.987-.944a29.755%2029.755%200%200%200-2.696-2.171c-1.138-.807-2.503-1.644-4.047-2.326-1.53-.666-3.25-1.185-5.056-1.321Z%22%2F%3E%3Cpath%20d%3D%22M41.876%2014.689c-.005.244-.014.486-.028.726-.013.24-.026.482-.045.72a22.73%2022.73%200%200%201-.152%201.398c-.067.453-.135.908-.217%201.347-.082.44-.174.869-.275%201.286a27.61%2027.61%200%200%201-.477%201.817l-.088.286-.085.285a26.204%2026.204%200%200%201-.542%201.598l-.18.495c-.12.323-.241.629-.361.919l-.347.825c-.222.519-.432.966-.615%201.332-.35.742-.595%201.158-.595%201.158s-.387-.333-.986-.952a24.127%2024.127%200%200%201-2.244-2.69c-1.658-2.318-3.42-5.682-3.547-9.787a15.975%2015.975%200%200%201%20.026-1.533c.037-.505.096-1.007.175-1.506.151-1.002.404-1.964.7-2.9.146-.47.317-.92.494-1.363.178-.443.365-.875.559-1.295.197-.416.405-.816.614-1.204.21-.387.419-.763.635-1.116a32%2032%200%200%201%201.271-1.907c.412-.555.794-1.034%201.121-1.426.324-.395.603-.689.793-.893.191-.203.3-.309.3-.309s.286.425.696%201.19c.411.765.946%201.868%201.464%203.216a29.696%2029.696%200%200%201%201.386%204.688c.37%201.752.585%203.634.553%205.595ZM61.318%2013.702c-.356.235-.719.449-1.088.646-.186.096-.367.198-.551.291a15.407%2015.407%200%200%201-1.118.514c-.188.078-.372.159-.559.233-.373.149-.748.283-1.124.405-.372.126-.741.245-1.11.35-.367.107-.738.196-1.093.29a24.12%2024.12%200%200%201-1.571.346c-.168.034-.333.068-.496.098a27.47%2027.47%200%200%201-.948.163c-.305.048-.601.086-.874.127-.55.079-1.043.133-1.456.171l-.554.046c-.161.014-.299.024-.412.031-.226.015-.349.018-.349.018s.012-.123.045-.349a12.476%2012.476%200%200%201%20.177-.962c.09-.407.211-.898.374-1.452.08-.279.178-.565.285-.867a24.422%2024.422%200%200%201%20.567-1.439%2022.867%2022.867%200%200%201%20.769-1.539c.19-.355.406-.7.634-1.053.229-.351.471-.708.733-1.058.265-.346.547-.69.845-1.031.15-.169.301-.341.461-.506a18.873%2018.873%200%200%201%201.011-.961c.177-.155.356-.313.546-.457.376-.294.769-.577%201.177-.845.203-.136.412-.26.623-.38a17.762%2017.762%200%200%201%201.271-.659c.213-.1.432-.188.647-.275.433-.173.865-.327%201.295-.465a19.917%2019.917%200%200%201%201.926-.475c.21-.041.422-.072.629-.103.416-.061.824-.108%201.221-.144l.296-.025.294-.015a23.148%2023.148%200%200%201%201.666-.016c1.407.056%202.573.234%203.394.418a13.88%2013.88%200%200%201%201.284.331s-.215.451-.626%201.166a39.77%2039.77%200%200%201-1.77%202.794%2027.062%2027.062%200%200%201-.918%201.268l-.167.214-.168.22c-.227.293-.465.586-.713.876-.124.146-.252.288-.381.434a19.093%2019.093%200%200%201-1.227%201.289c-.285.285-.583.562-.894.828-.155.134-.315.262-.475.394a14.313%2014.313%200%200%201-.997.757c-.174.119-.351.235-.528.355Z%22%2F%3E%3Cpath%20d%3D%22M49.291%2016.278a77.108%2077.108%200%200%200-14.805%2017.691%2076.284%2076.284%200%200%200-8.854%2021.3%2077.135%2077.135%200%200%200-2.096%2022.973%2076.252%2076.252%200%200%200%204.805%2022.561%2076.633%2076.633%200%200%200%2011.33%2020.094%2077.072%2077.072%200%200%200%2016.791%2015.819%2076.37%2076.37%200%200%200%2020.729%2010.12A76.755%2076.755%200%200%200%20100%20150.29%22%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-miterlimit%3A10%3Bstroke-width%3A4.553px%22%2F%3E%3C%2Fsvg%3E') no-repeat center / 1.5em;
    filter: opacity(0.4);
    content: '';
}

.button-053::before {
    left: 1.5em;
}

.button-053::after {
    right: 1.5em;
    transform: scaleX(-1);
}

星アイコンのリボン

基調色：#2589d0
ボタンの形状四角角丸
シャドウありなし

星アイコンをあしらったリボン付きのボタン。リボンの色が白なので、白背景にボタンを置く場合はシャドウを付けて立体的に見せるのがおすすめです。

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

.button-050 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .9em 2em .8em 45px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 30%), 0 2px 3px -2px rgb(0 0 0 / 20%);
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}

.button-050:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%), 0 0 5px rgb(0 0 0 / 10%);
}

.button-050::before {
    position: absolute;
    top: 0;
    left: 15px;
    width: 30px;
    height: 85%;
    background-color: #fff;
    clip-path: polygon(0 0, 0 100%, 50% 75%, 100% 100%, 100% 0);
    content: '';
}

.button-050::after {
    position: absolute;
    top: 33%;
    left: 30px;
    transform: translate(-50%, -50%);
    color: #2589d0;
    font-size: 1.2em;
    content: '★';
}

マイクロコピーver2

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

<button class="button-052">
    <span>無料</span>
    <span>ボタンデザイン</span>
</button>

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

.button-052 span:first-child {
    margin: 0 1em;
    padding: .2em 1em;
    border-radius: 15px;
    background-color: #fff;
    color: #2589d0;
    font-size: .8em;
}

.button-052 span:last-child {
    color: #fff;
    font-size: 1em;
}

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

吹き出し

基調色：#2589d0
ボタンの形状四角角丸
吹き出しの枠線なしあり

<button class="button-058">
    <span>テキスト</span>
    ボタンデザイン
</button>

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

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

.button-058 span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1.75em;
    left: -2.5em;
    padding: 1em 1.5em;
    border-radius: 50%;
    background-color: #fff;
    color: #2589d0;
    font-size: .7em;
}

.button-058 span::after {
    position: absolute;
    bottom: .3em;
    right: 0;
    width: 1.5em;
    height: 1.5em;
    background-color: #fff;
    clip-path: polygon(40% 0, 100% 100%, 0% 90%);
    content: '';
}

吹き出し(円形)

基調色：#2589d0
ボタンの形状四角角丸
吹き出しの枠線なしあり

<button class="button-057">
    <span>ここに<br/>テキスト</span>
    ボタンデザイン
</button>

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

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

.button-057 span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -3.5em;
    left: -1.4em;
    width: 5.8em;
    height: 5.8em;
    border-radius: 50%;
    background-color: #fff;
    color: #2589d0;
    font-size: .7em;
}

.button-057 span::after {
    position: absolute;
    bottom: .6em;
    right: -.2em;
    width: 1.2em;
    height: 1.2em;
    background-color: #fff;
    clip-path: polygon(40% 0, 100% 100%, 0% 90%);
    content: '';
}

吹き出し(横長)

基調色：#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-radius: 10px;
    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-048">ボタンデザイン</button>

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

.button-048::before {
    position: absolute;
    right: calc(2em + 2.5px);
    transform: translateX(50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
}

.button-048::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 3px solid #2589d0;
    border-right: 3px solid #2589d0;
    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;
}

通知

<button class="button-065">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M2.4 20.4v-1.8h2.5V9.4c0-1.7.5-3.2 1.5-4.5s2.3-2.1 3.9-2.5v-.8c0-.5.2-.8.5-1.1.3-.3.7-.5 1.2-.5s.9.2 1.2.4c.3.3.5.7.5 1.1v.9c1.6.3 2.9 1.2 3.9 2.5s1.5 2.8 1.5 4.5v9.2h2.5v1.8H2.4zM12 24c-.6 0-1.2-.2-1.7-.7-.5-.5-.7-1-.7-1.7h4.8c0 .7-.2 1.2-.7 1.7-.5.5-1 .7-1.7.7z"/>
    </svg>
    <span>2</span>
</button>

.button-065 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: #f2f2f2;
}

.button-065 svg {
    width: 25px;
    height: 25px;
    fill: #aaaaaa;
}

.button-065 span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -15%;
    right: -15%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #2589d0;
    color: #fff;
    font-size: .9em;
}

プラス

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

背景の円と共にプラスアイコンを付けてみました。背景の円は画像で、そしてアイコンはあえて疑似要素で表現することで「押下時に回転させてマイナスに変形させる」といった拡張も可能にしています。

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

.button-061 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .9em 3.2em .9em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2214%22%20style%3D%22fill%3A%23fff%3B%22%2F%3E%0A%3C%2Fsvg%3E);
    background-position: right 3em center;
    background-size: 1.2em;
    background-repeat: no-repeat;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

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

.button-061::before,
.button-061::after {
    position: absolute;
    right: calc(3.6em - 1.5px);
    width: 3px;
    height: 10px;
    border-radius: 1px;
    background-color: #2589d0;
    content: '';
}

.button-061::before {
    transform: rotate(90deg);
}

外部リンクアイコン

基調色：#2589d0
ボタンの形状四角角丸
アイコンの位置右左

外部リンクのアイコンを付けたボタン。そのリンクが別タブで開くことを明示しておきたい場合におすすめです。

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

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

.button-055::after {
    width: .9em;
    height: .9em;
    margin-left: 10px;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M20.2%2015h-1.5c-.4%200-.8.3-.8.8V21H3V6h6.8c.4%200%20.8-.3.8-.8V3.8c0-.4-.3-.8-.8-.8H2.2C1%203%200%204%200%205.2v16.5C0%2023%201%2024%202.2%2024h16.5c1.2%200%202.2-1%202.2-2.2v-6c.1-.5-.2-.8-.7-.8zm2.7-15h-6c-1%200-1.5%201.2-.8%201.9l1.7%201.7L6.3%2015c-.4.4-.4%201.2%200%201.6l1.1%201.1c.4.4%201.2.4%201.6%200L20.4%206.2l1.7%201.7c.7.7%201.9.2%201.9-.8v-6c0-.6-.5-1.1-1.1-1.1z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    content: '';
}

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

虫眼鏡

基調色：#2589d0
ボタンの形状四角角丸
アイコンの位置左右

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

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

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

.button-060::before {
    width: 1em;
    height: 1em;
    margin-right: 10px;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202.1-3.7%202.1-6%200-5.4-4.4-9.7-9.7-9.7S0%204.4%200%209.8s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2.1v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    content: '';
}

メールアイコン

基調色：#2589d0
ボタンの形状四角角丸
アイコンの位置左右

メールアイコンを付けたボタン。お問い合わせページへの導線などにどうぞ。

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

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

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

.button-056::before {
    width: 1em;
    height: 1em;
    margin-right: 10px;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M23.5%208.9c.2-.1.5%200%20.5.2v9.6c0%201.2-1%202.2-2.2%202.2H2.2C1%2021%200%2020%200%2018.8V9.2c0-.2.3-.4.5-.2%201%20.8%202.4%201.9%207.2%205.3%201%20.7%202.7%202.2%204.3%202.2%201.7%200%203.4-1.5%204.3-2.2%204.8-3.5%206.2-4.5%207.2-5.4zM12%2015c1.1%200%202.7-1.4%203.4-1.9%206.2-4.5%206.7-4.9%208.1-6%20.3-.3.5-.6.5-1v-.8C24%204%2023%203%2021.8%203H2.2C1%203%200%204%200%205.3v.9c0%20.3.2.6.4.8%201.4%201.1%201.9%201.5%208.1%206%20.8.6%202.4%202%203.5%202z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    content: '';
}

ダウンロード

基調色：#2589d0
ボタンの形状四角角丸
アイコンの位置左右

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

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

.button-062:hover {
    background-color: 2589d0;
}

.button-062::before {
    width: 1em;
    height: 1em;
    margin-right: 10px;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.6%208.4V1.2H8.4v7.198h-6l9.6%209.6%209.6-9.6h-6zM0%2020.4h24v2.4H0v-2.4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    content: '';
}

カート

基調色：#2589d0
ボタンの形状四角角丸
アイコンの位置左右

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

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

.button-063:hover {
    background-color: 2589d0;
}

.button-063::before {
    width: 1em;
    height: 1em;
    margin-right: 10px;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7.2%2019.2c-1.3%200-2.4%201.1-2.4%202.4%200%201.3%201.1%202.4%202.4%202.4s2.4-1.1%202.4-2.4c0-1.3-1.1-2.4-2.4-2.4zM0%200v2.4h2.4l4.3%209.1-1.6%202.9c-.2.3-.3.7-.3%201.2%200%201.3%201.1%202.4%202.4%202.4h14.4v-2.4H7.7c-.2%200-.3-.1-.3-.3v-.1l1.1-2h8.9c.9%200%201.7-.5%202.1-1.2l4.3-7.8c.2-.2.2-.4.2-.6%200-.7-.5-1.2-1.2-1.2H5.1L3.9%200H0zm19.2%2019.2c-1.3%200-2.4%201.1-2.4%202.4%200%201.3%201.1%202.4%202.4%202.4%201.3%200%202.4-1.1%202.4-2.4%200-1.3-1.1-2.4-2.4-2.4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    content: '';
}

お気に入り

基調色：#f1443e
ボタンの形状四角角丸
アイコンの位置左右

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

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

.button-064:hover {
    background-color: f1443e;
}

.button-064::before {
    width: 1em;
    height: 1em;
    margin-right: 10px;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C23l-1.2-1.1c-2.1-1.9-3.9-3.6-5.2-5c-1.4-1.4-2.5-2.7-3.3-3.8s-1.4-2.1-1.7-3C0.2%2C9.2%2C0%2C8.3%2C0%2C7.3C0%2C5.5%2C0.6%2C4%2C1.8%2C2.8%20C3%2C1.6%2C4.5%2C1%2C6.3%2C1c1.1%2C0%2C2.2%2C0.3%2C3.2%2C0.8s1.8%2C1.3%2C2.5%2C2.3c0.8-1.1%2C1.7-1.9%2C2.7-2.4s2-0.8%2C3-0.8c1.8%2C0%2C3.3%2C0.6%2C4.5%2C1.8%20C23.4%2C4%2C24%2C5.5%2C24%2C7.3c0%2C0.9-0.2%2C1.8-0.5%2C2.7c-0.3%2C0.9-0.9%2C1.9-1.7%2C3c-0.8%2C1.1-1.9%2C2.4-3.3%2C3.8c-1.4%2C1.4-3.1%2C3.1-5.2%2C5L12%2C23z%20M12%2C20.6c2-1.9%2C3.7-3.5%2C5-4.8c1.3-1.3%2C2.3-2.5%2C3.1-3.5s1.3-1.9%2C1.6-2.7c0.3-0.8%2C0.5-1.6%2C0.5-2.3c0-1.3-0.4-2.4-1.3-3.3%20S19%2C2.8%2C17.7%2C2.8c-1%2C0-2%2C0.3-2.9%2C0.9c-0.9%2C0.6-1.6%2C1.5-2.1%2C2.7h-1.5c-0.5-1.1-1.2-2-2.1-2.6c-0.9-0.6-1.8-1-2.9-1%20C5%2C2.8%2C3.9%2C3.2%2C3.1%2C4.1S1.8%2C6%2C1.8%2C7.3c0%2C0.8%2C0.2%2C1.6%2C0.5%2C2.3s0.8%2C1.7%2C1.6%2C2.7s1.8%2C2.2%2C3.1%2C3.5S10%2C18.8%2C12%2C20.6z%22%20fill%3D%22%23f1443e%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    content: '';
}

アニメーション付きのボタン

光が通り抜ける

基調色：#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
ボタンの形状四角角丸

SVGを利用しボタン右上で星を光らせてみました。光を際立たせるためにも、背景色はできるだけ黒系統するのがおすすめです。

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

.button-059 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 250px;
    margin: 3em auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    animation: anim-button-059-bright 1.4s ease-out infinite;
}

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

.button-059::before,
.button-059::after {
    position: absolute;
    top: -1.5em;
    right: -1.5em;
    width: 3em;
    height: 3em;
    content: '';
}

.button-059::before {
    border: 1px solid #ffffff33;
    border-radius: 50%;
    animation: anim-button-059-circle 1.4s linear infinite;
}

.button-059::after {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20190%20247%22%3E%3Cpath%20d%3D%22M190%2C123.5c-90%2C3.6-92.2%2C6.5-95%2C123.5-2.8-117-5-119.9-95-123.5%2C90-3.6%2C92.2-6.5%2C95-123.5%2C2.8%2C117%2C5%2C119.9%2C95%2C123.5Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
    animation: anim-button-059-star 1.4s linear infinite;
    filter: opacity(.8);
}

@keyframes anim-button-059-bright{
    75% {
        filter: unset;
    }
    80% {
        filter: brightness(1.1);
    }
}

@keyframes anim-button-059-circle {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    75% {
        opacity: 0;
    }
    80% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes anim-button-059-star {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    75% {
        opacity: 0;
        transform: scale(0);
    }
    80% {
        opacity: 1;
    }
    85% {
        opacity: 1;
        transform: scale(1.5) rotate(50deg);
    }
    95% {
        opacity: 0;
        transform: scale(4) rotate(150deg);
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(80deg);
    }
}

ホバーで動くボタン

下線が伸びる

伸びる下線の色：#2589d0

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

.button-051 {
    display: flex;
    justify-content: center;
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: .9em 2em;
    border: none;
    border-bottom: 2px solid #e6edf3;
    background-color: transparent;
    color: #333;
    font-weight: 600;
    font-size: 1em;
}

.button-051::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    transform: scaleX(0);
    transform-origin: center left;
    width: 100%;
    height: 2px;
    background-color: #2589d0;
    content: '';
    transition: transform .3s ease;
}

.button-051:hover::after {
    transform: scaleX(1);
}

色が反転

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

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

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

.button-036 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .9em 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: .9em 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: .9em 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 2em;
    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: .9em 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: .9em 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: .9em 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: .9em 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: .9em 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: .9em 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: '';
}

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(横長)

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

横長にした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;
}

背景色：#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: .9em 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-024">ボタンデザイン</button>

.button-024 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .9em 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: .9em 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: .9em 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: .9em 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: .9em 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;
}

リアルな円形

背景色：#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;
}

凹凸感強め

文字色：#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;
}