CSSでつくるボタン各種サンプル集


TAKAHIRO YAMADA
@rural_web
CSSでつくるボタン各種サンプル集

HTMLとCSSでつくる「ボタン」サンプル集。最近は画像ボタンよりもCSSでつくる機会が増えたので、ちょこちょこまとめてみる。基本的にレスポンシブ。困ったときにコピペでさくっと簡単に使える用。思いついたり、見つけたりしたら更新。

注意事項

CSSがバッティングするとサンプル通りに表示されないので注意。PCでレスポンシブの確認するときは、ブラウザの横幅を変えて確認。

シンプル系

1.ベーシック

ソース表示

css

a.btn {
    display: block;
    background: #ffb05c;
    color: #FFF;
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 15px;
    text-decoration: none;
    transition: all .2s;
}
a.btn:hover {
	opacity:0.85;
}

html

<a class="btn">テキストサンプル</a>

ホバーアニメーション系

1.横から矢印

※アイコンフォント「FontAwesome」利用。使い方はこちら

ソース表示

css

a.btn {
	display: block;
	background: #ffb05c;
	color: #FFF;
	text-align: center;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 15px;
	text-decoration: none;
	transition: all .3s;
}
a.btn:hover {
	text-decoration: none;
}
a.btn span {
	display: inline-block;
	transition: all .3s;
}
a.btn span:after {
	font-family:FontAwesome;
	content: '\f101';
	opacity: 0;
	transition: all .3s;
}
a.btn:hover span:after {
	opacity: 1;
	margin-right: 25px;
	margin-left:10px;
}

html

<a class="btn"><span>テキストサンプル</span></a>

2.浮き出る

ソース表示

css

a.btn {
	display: block;
	background: #ffb05c;
	color: #FFF;
	text-align: center;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 15px;
	text-decoration: none;
	transition: all .2s;
}
a.btn:hover {
	text-decoration: none;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.1);
}

html

<a class="btn">テキストサンプル</a>

3.中央から背景変化(横スライド)

ソース表示

css

a.btn {
	z-index:100;
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 10px 20px;
	color: #ffb05c;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: all 0.75s;
	border: 1px solid #ffb05c;
}
a.btn:after{
	content: "";
	position: absolute;
	background: #ffb05c;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 100%;
	z-index: -1;
	opacity: .5;
	transform: translateY(-50%) translateX(-50%) rotate(90deg);
	transition: all 0.75s;
}
a.btn:hover {
	color: #FFF;
	text-decoration:none;
}
a.btn:hover:after{
	opacity: 1;
	height: 320px!important;//ボタンの横幅最大値に合わせる
}

html

<a class="btn">テキストサンプル</a>

4.中央から背景変化(縦スライド)

ソース表示

css

a.btn {
	z-index:100;
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 10px 20px;
	color: #ffb05c;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: all 0.75s;
	border: 1px solid #ffb05c;
}
a.btn:after{
	content: "";
	position: absolute;
	background: #ffb05c;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 100%;
	z-index: -1;
	opacity: .5;
	transform: translateY(-50%) translateX(-50%);// rotate()使わない
	transition: all 0.75s;
}
a.btn:hover {
	color: #FFF;
	text-decoration:none;
}
a.btn:hover:after{
	opacity: 1;
	height: 150%!important;//ボタンの高さより多めに。
}

html

<a class="btn">テキストサンプル</a>

5.端っこから背景変化(左から右に)

ソース表示

css

a.btn {
	z-index:100;
	position: relative;
	display: block;
	border: 1px solid #ffb05c;
	padding: 10px 20px;
	color: #ffb05c;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: all 0.75s;
}

a.btn:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    background: #ffb05c;
    transition: all 0.4s cubic-bezier(0.5, 0.5, 0.5, 1);
}
a.btn:hover {
	color: #FFF;
	text-decoration:none;
}
a.btn:hover:before {
	left: 0%;
	right: auto;
	width: 100%;
}

html

<a class="btn">テキストサンプル</a>

6.端っこから背景変化(右から左に)

ソース表示

css

a.btn {
	z-index:100;
	position: relative;
	display: block;
	border: 1px solid #ffb05c;
	padding: 10px 20px;
	color: #ffb05c;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: all 0.75s;
}

a.btn:before {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    background: #ffb05c;
    transition: all 0.4s cubic-bezier(0.5, 0.5, 0.5, 1);
}
a.btn:hover {
	color: #FFF;
	text-decoration:none;
}
a.btn:hover:before {
	left: auto;
	right: 0%;
	width: 100%;
}

html

<a class="btn">テキストサンプル</a>

コメントを表示 (0)

Comments

CAPTCHA


関連記事

ホームページ制作

見出しデザインサンプル集【CSS】

HTMLとCSSでつくる見出しサンプル集。基本的にレスポンシブ。困ったときにコピペでさくっと簡単に使える用。思いついたり、見つけたりしたら更新。 ベーシック系 1.べたなやつ テキストサンプル 2.中 […]

by TAKAHIRO YAMADA
ホームページ制作

フォントサイズの単位まとめ

フォントサイズの単位「px、em、rem、%」の違いについてのまとめ。 px(ピクセル)について 押さえたいポイント モニタ画面の最小単位1ドットと同等で考えておけばいい。 環境によって左右されない絶 […]

by TAKAHIRO YAMADA