フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログCHIIWEB BLOG

【css】コピペOK!ボタンデザインまとめ

ボタンデザインまとめ(cssコピペOK)

こんにちは。ちょっとお役立ち?だったら嬉しいデザインまとめです。

この記事を書いている人

Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
もっと詳しくみる

前回は、デザインする時の参考になる、見出しをまとめてみました。⇨シンプルな見出しのデザインをまとめました

今回は、同じく参考にできるようにシンプルなボタンのデザインをまとめてみました^^

clickでcssに飛びますわたし

ボタンデザインだけ

サイトデザインまとめはよくあるけど、ボタンだけのまとめって中々ないですよね。

ボーダーの位置や長さを変えるとピックアップした以外にもアレンジは色々できると思います♫

シンプルな中でも少し遊び心が出せるようなボタンだと楽しいですね💗

ボーダーのみのシンプルなボタン

<div class="btn">
	<a href="#">詳しく見る</a>
</div>

このcssがベースになります↓

.btn {
	font-size: 14px;
	border: 1px solid #666;
	text-align: center;
	max-width: 200px;
	margin: 20px auto;
	font-family: 'Noto Serif JP', serif;
}
.btn a {
	color: #666;
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
}

このボタンをベースにして、カスタマイズしていきますね。

class="btn"に追加で別classを適用していきます。

コピペする場合は、↑のcssに追加で↓cssをプラスしてください。

backgroundのみのシンプルなボタン

<div class="btn btn2">
	<a href="#">詳しく見る</a>
</div>
.btn2 {
	background: #666;
}
.btn2 a {
	color: white;
}

ボーダーにアクセントのボーダー

<div class="btn btn3">
	<a href="#">詳しく見る</a>
</div>
.btn3 {
	position: relative;
}
.btn3::before {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background: #666;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -30px;
	margin: auto;
}

アイコン+文字+ボーダー

<div class="btn btn4">
	<a href="#">詳しく見る</a>
</div>
.btn4 a::before {
	content: '\f1d8';
	font-family: 'fontawesome';
	font-weight: 900;
	margin-right: 20px;
}

アイコンフォント、Font Awesomeを利用しています。

右に正方形の半分を+

<div class="btn btn5">
	<a href="#">Read more</a>
</div>
.btn5 {
	position: relative;
	border: none;
	letter-spacing: .2em;
	margin-top: 60px;
}
.btn5::before {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	rotate: -45deg;
	position: absolute;
	right: 0;
	top: -10px;
}

ボーダー矢印+文字

<div class="btn btn6">
	<a href="#">VIEW MORE</a>
</div>
.btn6 {
	position: relative;
	border: none;
	border-bottom: 1px solid #666;
	width: 300px;
	max-width: 90%;
}
.btn6::before {
	content: "";
	display: block;
	width: 30px;
	height: 1px;
	background: #666;
	rotate: 40deg;
	position: absolute;
	right: -3px;
	bottom: 9px;
}

角丸ボーダー

<div class="btn btn7">
	<a href="#">詳しく見る</a>
</div>
.btn7 {
	border-radius: 25px;
}

角丸ボーダー+ >

<div class="btn btn8">
	<a href="#">詳しく見る</a>
</div>
.btn8 {
	border-radius: 25px;
	position: relative;
}
.btn8 a::after {
	content: "";
	display: block;
	position: absolute;
	background-image: url('arrow.png');
	background-size: 100%;
	width: 7px;
	height: 17px;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
}

ボーダー+右上ちび三角

<div class="btn btn9">
	<a href="#">詳しく見る</a>
</div>
.btn9 {
	position: relative;
}
.btn9::before {
	content: "";
	border: 14px solid transparent;
	border-top: 0 solid #e0e0e0;
	border-right: 14px solid #e0e0e0;
	position: absolute;
	top: 3px;
	right: 3px;
}

ボーダー+ボーダー

<div class="btn btn10">
	<a href="#">詳しく見る</a>
</div>
.btn10 {
	position: relative;
}
.btn10::before {
	content: "";
	width: 30px;
	height: 1px;
	background: #666;
	rotate: -45deg;
	position: absolute;
	left: -10px;
	top: 5px;
}

下ボーダー+>

<div class="btn btn11">
	<a href="#">view more</a>
</div>
.btn11 {
	position: relative;
	border: none;
	border-bottom: 1px solid #666;
	width: fit-content;
	}
.btn11 a::after {
	content: ">";
	margin-left: 20px;
}

上下ボーダー

<div class="btn btn12">
	<a href="#">view more</a>
</div>
.btn12 {
	border: none;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
}

線がちょっとずれたボーダー

<div class="btn btn13">
	<a href="#">view more</a>
</div>
.btn13 {
 border:none;
 position:relative;
}
.btn13::before {
 content: "";
 width:30px;
 height: 1px;
 background:#000;
 display:block;
 position:absolute;
 top:0;
 left:-5px;
}
.btn13 a::before {
 content: "";
 width:1px;
 height: 30px;
 background:#000;
 display:block;
 position:absolute;
 top:-5px;
 left:0;
}
.btn13::after {
 content: "";
 width:30px;
 height: 1px;
 background:#000;
 display:block;
 position:absolute;
 bottom:0;
 right:-5px;
 top:auto;
}
.btn13 a::after {
 content: "";
 width:1px;
 height: 30px;
 background:#000;
 display:block;
 position:absolute;
 bottom:-5px;
 right:0;
 top:auto;
}

ボタンは見出しよりもマウスホバー時にアニメーションを設定しやすいのでアイデア次第でオリジナルボタンを作ることもできると思います♫


コメントを残す

CAPTCHA


コメントは承認後に表示されます。

ドメインとサーバーはエックスサーバーで一括管理が便利♪

ドメイン取得↓

サーバー契約↓

合わせて読んでほしい記事

関連記事