



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

スタンダード×枠線あり
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-001">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

スタンダード×交差する枠線
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-045">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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);
}

平行四辺形
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-039">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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: '';
}

スタンダード×塗りつぶし
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-002">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

立体的(シャドウ)
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-003">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

立体的(段差)
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-004">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

グラデーション(上下)
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-043">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

マイクロコピー付き
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<div class="button-005">
<span>今なら送料無料</span>
<button>ボタンデザイン</button>
</div>
step3
CSSをコピペする
CSS
.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);
}

吹き出し付き
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<div class="button-011">
<div>今なら送料無料</div>
<button>ボタンデザイン</button>
</div>
step3
CSSをコピペする
CSS
.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;
}

光るアニメーション付き
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-010">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}
ホバーで動くボタン

色が反転
step1
デザインを調整する
ホバーすると背景色が基調色となるボタン。シンプルながらもしっかりと目を引くことができます。
step2
HTMLをコピペする
HTML
<button class="button-036">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

横にスライド
step1
デザインを調整する
背景が横からスライドしてくるボタン。矢印アイコンとの親和性も高めです。
step2
HTMLをコピペする
HTML
<button class="button-029">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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%;
}

狭まりながら塗りつぶす
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-031">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

対角線上に広がる
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-032">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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%;
}

波紋
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-030">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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%);
}
}

枠線を描画
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-033">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}

バウンド
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-041">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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);
}
}

震える
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-038">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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);
}
}
クリックで動くボタン

ローディング
step1
デザインを調整する
クリックするとローディングアニメーションが表示されるボタン。JavaScriptを使わないので、単純なリンクとしてボタンを設置する際などにおすすめです。
step2
HTMLをコピペする
HTML
<button class="button-037">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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: '';
}
汎用的なボタン
コピー(リンク)
step1
デザインを調整する
現在のページのURLをコピーするボタンとしてよく見かけるものです。SNSのボタンと並べる場合、グレー系の色にして他のボタンを際立たせるのがおすすめです。
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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;
}
コピー(コード)
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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;
}
メニュー
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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;
}
ページトップへ戻る
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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シェアボタン
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<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>
step2
CSSをコピペする
CSS
.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(白背景×シャドウ)
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<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>
step2
CSSをコピペする
CSS
.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(横長)
step1
デザインを調整する
横長にしたTwitter用のボタン。ロゴだけでなく「ツイート」という文言を入れておくことで、多少シェア率の向上が見込めるかもしれません。
step1
HTMLをコピペする
HTML
<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>
step2
CSSをコピペする
CSS
.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;
}
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<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>
step2
CSSをコピペする
CSS
.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
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<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>
step2
CSSをコピペする
CSS
.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;
}
はてなブックマーク
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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;
}
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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;
}
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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
step1
デザインを調整する
プロフィール欄などに載せるのに適したGitHubのボタン。利用する際はGitHub ロゴのポリシーに反しないように気を付けてください。
step1
HTMLをコピペする
HTML
<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>
step2
CSSをコピペする
CSS
.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
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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;
}

step1
デザインを調整する
step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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;
}
グラデーションボタン

紫+青+水色
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<button class="button-022">ボタンデザイン</button>
step2
CSSをコピペする
CSS
.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;
}

青マゼンタ+水色
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<button class="button-023">ボタンデザイン</button>
step2
CSSをコピペする
CSS
.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;
}

橙色+オレンジ色
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<button class="button-024">ボタンデザイン</button>
step2
CSSをコピペする
CSS
.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;
}

ピンク+赤
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<button class="button-025">ボタンデザイン</button>
step2
CSSをコピペする
CSS
.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;
}
その他のボタン

ストライプ背景×枠線
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-044">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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%);
}

白背景×シャドウ
step1
デザインを調整する
step1
HTMLをコピペする
HTML
<button class="button-040">ボタンデザイン</button>
step2
CSSをコピペする
CSS
.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%);
}

ニューモーフィズム風
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-021">ボタンデザイン</button>
step3
CSSをコピペする
CSS
.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;
}
コントラスト強め
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-014">
<span>ボタン</span>
</button>
step3
CSSをコピペする
CSS
.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);
}
クラシカル
step1
デザインを調整する
古めのOSのUIを彷彿とさせる、クラシックなデザインのボタン。使い勝手に関しては微妙ですが、遊び心を入れたい方にはおすすめです。
step2
HTMLをコピペする
HTML
<button class="button-047">ボタン</button>
step3
CSSをコピペする
CSS
.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;
}

凹凸感強め
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-046">
<span>ボタン</span>
</button>
step3
CSSをコピペする
CSS
.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;
}

リアルな円形
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<button class="button-013">ボタン</button>
step3
CSSをコピペする
CSS
.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;
}
「skew」で傾斜を付けたボタン。テキストを真っ直ぐのままにするために、疑似要素に傾斜を付けています。