【HTML & CSS】CSSのみでボタンデザイン

記事

IT・テクノロジー

Hyde_1970｜Webマスター

2026/07/07 19:25

すみません、ザックリとCSSでのボタンデザインです。

内容は、画像を一切使わなくても、このくらいのグラフィカルなボタンがデザインできますよー、という内容です。

（画像を使用しないので、画像ボタンやバナーよりは読み込みが速いと思われます。）

サンプルでは、<button>タグと<a>タグの2パターン用意しております。

■ボタン１（<button>タグ用）

▼CSS

button{
position: relative;
width: 100px;
height: 100px;
background: radial-gradient(50% 80%, circle, #00D1F2, #0055C1);
border: 1px solid rgba(0,0,0,0.5);
border-radius: 50%;
color: #fff;
font-size: 15px;
line-height: 1.2em;
font-family: inherit;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5) ,
0px 0px 4px rgba(255, 255, 255, 1);
box-shadow: 0 2px 6px rgba(0,0,0,0.5),
0 2px 10px rgba(0,100,255, 0.7),
inset 0 0 10px rgba(0,0,150,0.6);
cursor: pointer;
}
button:before {
content: "";
position: absolute;
display: block;
width: 80%;
height: 60%;
background-image: linear-gradient(top, rgba(250, 250, 255, 1) 0%, rgba(250, 250, 255, 0.7) 10%, rgba(250, 250, 255, 0) 100%);
border-radius: 50%;
margin: 0 auto;
top: 1%;
left: 0;
right: 0;
}
button:hover{
opacity: 0.7;
}

▼HTML

<button>てすと<br>テスト</button>

■ボタン２（<a>タグ用）

▼CSS

.button {
padding: 0;
margin: 10px;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 50%;
background: radial-gradient(50% 80%, circle, #00D1F2, #0055C1);
box-shadow: 0 2px 6px rgba(0,0,0,0.5),
0 2px 10px rgba(0,100,255, 0.7),
inset 0 0 10px rgba(0,0,150,0.6);
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5) ,
0px 0px 4px rgba(255, 255, 255, 1); color: #fff;
text-align: center;
line-height: 1.2em;
}
.button:hover{
opacity: 0.7;
}
.button:before {
content: "";
position: absolute;
display: block;
border-radius: 50%;
width: 80%;
height: 60%;
margin: 0 auto;
background-image: linear-gradient(top, rgba(250, 250, 255, 1) 0%, rgba(250, 250, 255, 0.7) 10%, rgba(250, 250, 255, 0) 100%);
z-index: 1;
top: 1%;
left: 0;
right: 0;
}
.button:after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.button span{
position: relative;
z-index: 2;
display: inline-block;
vertical-align: middle;
padding: 3px 0;
}