今回のアイデアテーマはボタン！。LP制作や、CTAを設置する際に重宝するCSSです。
初心者でも安心のコピペで使えるCSSをご用意しました！
#01Slide Fill見本
サイドから背景が伸びてくる！
HTML
<button class="btn-slide">button</button>CSS
.btn-slide{
position:relative; display:inline-block; padding:12px 18px;
border-radius:12px; border:2px solid #6366f1; background:transparent;
color:#6366f1; font:600 14px/1 ui-sans-serif,system-ui; cursor:pointer;
overflow:hidden; transition:color .3s, background-size .35s ease;
background:
linear-gradient(90deg,#6366f1,#06b6d4) 0 0 / 0% 100% no-repeat;
}
.btn-slide:hover{
background-size: 100% 100%;
color:#fff;
}
#02Press 3D見本
3Dで立体的なボタン！
HTML
<button class="btn-press">button</button>CSS
.btn-press{
display:inline-block; padding:12px 18px; border-radius:12px; border:none;
background:#6366f1; color:#fff; font:700 14px/1 ui-sans-serif,system-ui; cursor:pointer;
box-shadow:0 7px 0 #4f46e5, 0 10px 18px rgba(0,0,0,.2);
transform: translateY(0);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
/* ホバーで軽く沈む（押し込み感） */
.btn-press:hover{
transform: translateY(3px);
box-shadow: 0 4px 0 #4f46e5, 0 8px 14px rgba(0,0,0,.2);
filter: brightness(0.98);
}
/* クリック中はさらに沈む */
.btn-press:active{
transform: translateY(5px);
box-shadow: 0 2px 0 #4f46e5, 0 6px 10px rgba(0,0,0,.18);
}
#03Neon Glow見本
ホバーで光彩アップ！
HTML
<button class="btn-neon">button</button>CSS
.btn-neon{
display:inline-block; padding:12px 18px; border-radius:12px; border:2px solid #4338ca;
background:#0b0f1a; color:#c7d2fe; font:600 14px/1 ui-sans-serif,system-ui; cursor:pointer;
text-shadow:0 0 6px rgba(99,102,241,.8);
box-shadow:0 0 18px rgba(99,102,241,.6), inset 0 0 0 2px #4338ca;
transition:box-shadow .25s ease;
}
.btn-neon:hover{ box-shadow:0 0 28px rgba(99,102,241,.8), inset 0 0 0 2px #4338ca; }
#04rubber見本
黒のグラデーションでラバー感を演出。
文字だけ浮き出るおしゃれボタン
HTML
<button class="btn-rubber">button</button>CSS
.btn-rubber{
position:relative; display:inline-block; padding:12px 18px; border-radius:14px;
border:2px solid rgba(255,255,255,.85);
background:
linear-gradient(180deg,rgba(255,255,255,0.5),rgba(255,255,255,0)),
rgba(17,24,39,1);
color:#fff; font:700 14px/1 ui-sans-serif,system-ui; cursor:pointer;
backdrop-filter: blur(12px) saturate(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
text-shadow:0 1px 2px rgba(0,0,0,.6);
box-shadow:0 14px 32px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.25);
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn-rubber:hover{
background:
linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16)),
rgba(17,24,39,.32);
border-color:#fff;
}
.btn-rubber:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
.btn-rubber{ background: rgba(17,24,39,.35); }
}
#05Gradient Border見本
ボタンの枠をグラデーション。
ちょっとした遊び心に。
HTML
<button class="btn-gborder">button</button>CSS
.btn-gborder{
position:relative; display:inline-block; padding:12px 18px; border-radius:14px;
color:#fff; font:600 14px/1 ui-sans-serif,system-ui; cursor:pointer;
background:
linear-gradient(#0b0f1a,#0b0f1a) padding-box,
conic-gradient(from 0deg, #6366f1, #06b6d4, #6366f1) border-box;
border:2px solid transparent;
transition:filter .2s ease;
}
.btn-gborder:hover{ animation:gb-spin 1.2s linear infinite; filter:saturate(1.1); }
@keyframes gb-spin{
to{
background:
linear-gradient(#0b0f1a,#0b0f1a) padding-box,
conic-gradient(from 360deg, #6366f1, #06b6d4, #6366f1) border-box;
}
}
.btn-gborder:focus-visible{ outline:3px solid rgba(99,102,241,.45); outline-offset:2px; }
#06Shine Sweep見本
マウスホバーできらめくボタン。
HTML
<button class="btn-shine">button</button>CSS
.btn-shine{
position:relative; display:inline-block; padding:12px 18px; border-radius:12px; border:none;
background:#6366f1; color:#fff; font:700 14px/1 ui-sans-serif,system-ui; cursor:pointer;
overflow:hidden;
}
.btn-shine::after{
content:""; position:absolute; inset:-120% -40%;
background:linear-gradient(60deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
transform:translateX(-60%);
}
.btn-shine:hover::after{ transition:transform .7s ease; transform:translateX(60%); }
.btn-shine:focus-visible{ outline:3px solid rgba(255,255,255,.6); outline-offset:2px; }
#07Arrow Move見本
矢印の動きでアクションを誘導。
HTML
<button class="btn-arrow">button</button>CSS
.btn-arrow{
display:inline-flex; align-items:center; gap:.5em;
padding:12px 18px; border-radius:12px; background:#fff; color:#111;
border:2px solid #334155; font:600 14px/1 ui-sans-serif,system-ui; cursor:pointer;
transition:color .2s ease, border-color .2s ease;
}
.btn-arrow::after{
content:"→"; font-weight:700; transform:translateX(-4px);
transition:transform .25s ease;
}
.btn-arrow:hover::after{ transform:translateX(2px); }
.btn-arrow:hover{ color:#0f172a; border-color:#0f172a; }
.btn-arrow:focus-visible{ outline:3px solid rgba(51,65,85,.35); outline-offset:2px; }
#08Aurora Gradient見本
きらめくオーロラ風ボタン！
HTML
<button class="btn-aurora">button</button>CSS
.list-orbit { list-style: none; padding: 0; margin: 0; }
.list-orbit li {
--core:#10b981;
position: relative; padding-left: 1.6em; line-height: 1.9;
}
.list-orbit li::before {
content:""; position:absolute; left:0; top:.58em;
width:.84em; height:.84em; border-radius:50%;
background: radial-gradient(circle .33em at 50% 50%, var(--core) 99%, #0000 100%);
box-shadow: 0 0 0 .16em color-mix(in oklab, var(--core), #000 20%);
}
#09“Outline Offset Merge見本
アウトラインボタンでスタイリッシュに。
HTML
<button class="btn-outline-merge">button</button>CSS
.btn-outline-merge{
position: relative;
display: inline-block;
padding: 12px 20px;
border: none; /* ← アウトラインだけ（枠は疑似要素で描画） */
border-radius: 12px;
background: transparent;
color: #0f172a; /* 文字色はお好みで */
font: 700 14px/1 ui-sans-serif, system-ui;
cursor: pointer;
transition: transform .2s ease;
}
/* 上左にズレた枠（パープル） */
.btn-outline-merge::before,
.btn-outline-merge::after{
content: "";
position: absolute;
inset: 0; /* 要素サイズと同じ矩形 */
border-radius: 12px;
pointer-events: none;
transition: transform .28s cubic-bezier(.2,.6,.2,1), border-color .28s ease, opacity .28s ease;
}
.btn-outline-merge::before{
border: 2px solid #6366f1; /* パープル */
transform: translate(-6px, -6px); /* ← 上左にズレ */
}
/* 下右にズレた枠（シアン） */
.btn-outline-merge::after{
border: 2px solid #06b6d4; /* シアン */
transform: translate(6px, 6px); /* ← 下右にズレ */
}
/* ホバーで“合体”して1本の枠に見せる */
.btn-outline-merge:hover::before,
.btn-outline-merge:hover::after{
transform: translate(0,0);
border-color: #6366f1; /* 色を揃えて1本感を強める */
}
/* クリック中のちょい押し込み感（任意） */
.btn-outline-merge:active{ transform: translateY(1px); }
/* アクセシビリティ：キーボード操作でリング表示 */
.btn-outline-merge:focus-visible{
outline: 3px solid rgba(99,102,241,.45);
outline-offset: 3px;
}
/* 表示用の説明 */
.sub{font-size:12px;color:#64748b;margin:4px 0 10px}
#10Corner Frame見本
シンプルながらもホバーでアクセント！
HTML
<button class="btn-corner-frame">button</button>CSS
.btn-corner-frame{
position:relative;
display:inline-block;
padding:12px 24px;
background:transparent;
border:none; border-radius:12px;
color:#0f172a; /* ← 好きな色に変更可 */
font:700 14px/1 ui-sans-serif,system-ui;
cursor:pointer;
transition: background-size .4s ease, color .2s ease, transform .2s ease;
background-repeat: no-repeat;
/* 角のL字を8つの背景レイヤーで描く（TL横/縦, TR横/縦, BL横/縦, BR横/縦） */
background-image:
linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor);
/* 角から8px内側に置く（視覚的余白） */
background-position:
left 8px top 8px, left 8px top 8px,
right 8px top 8px, right 8px top 8px,
left 8px bottom 8px,left 8px bottom 8px,
right 8px bottom 8px,right 8px bottom 8px;
/* 初期サイズ：短いL字（横18×2 / 縦2×18） */
background-size:
18px 2px, 2px 18px,
18px 2px, 2px 18px,
18px 2px, 2px 18px,
18px 2px, 2px 18px;
}
/* ホバーで四辺へスーッと伸びて“1本の枠”になる */
.btn-corner-frame:hover{
background-size:
calc(100% - 16px) 2px, 2px calc(100% - 16px),
calc(100% - 16px) 2px, 2px calc(100% - 16px),
calc(100% - 16px) 2px, 2px calc(100% - 16px),
calc(100% - 16px) 2px, 2px calc(100% - 16px);
}
/* クリックでわずかに沈む */
.btn-corner-frame:active{ transform: translateY(1px); }
いかがでしたでしょうか？
今回はボタンのCSSのアイデアを考えてみました！
背景との相性を考えて、コントラストをはっきりさせると効果も出やすいですよ！
ホームページ制作でお悩みならまずは相談してみませんか？
コメント