1. TOP
  2. CSS
  3. コピペで使える CSSで作る動きのあるボタン transition

コピペで使える CSSで作る動きのあるボタン transition

目次

おはこんばんちわ ハクロンです。

transitionプロパティを使って動きを表現するボタン例です。
細かいtransitionプロパティの使い方はどこかでかけたら書きます。

こちらも対応ブラウザは下記サイトで確認するといいです。
http://caniuse.com/#search=transition

値はそれぞれ、「変化させるプロパティ」、「変化にかける時間」、「イージング」、「変化が始まるまで遅延時間」

書き方は
transition: 「変化させるプロパティ」「変化にかける時間」「イージング」「変化が始まるまで遅延時間」

例だと
#huge {
transition: width 5s ease-in 0.5s;
}

「変化させるプロパティ」
プロパティを複数指定したいときはカンマ区切りで指定します。
すべて指定したい場合はallとします。初期値はallです。
※マウスオーバー前と後で値を変えておかないとアニメーションになりませんので注意してください。

「変化にかける時間」
5秒なら5s、500ミリ秒なら500msになります。初期値は0(0だと変化なしです)です。

「イージング」
ease(開始と終了が滑らか、初期値)
linear(一定)
ease-in(ゆっくり始まる)
ease-out(ゆっくり終わる)
ease-in-out(ゆっくり始まってゆっくり終わる)


スポンサードリンク


左右に開くようなボタン

HTML

<div align="center">
<a class="buttonLR" href="#">左右に開くボタン</a>
</div>

CSS

.buttonLR {
	display: inline-block;/* ここから共通*/
	width: 250px;
	height: 60px;
	text-align: center;
	text-decoration: none;
	line-height: 60px;
	outline: none;/* ここまで共通*/
	position: relative;
	z-index: 2;
	background-color: #b90b0b;
	border: 2px solid #b90b0b;
	color: #fff;
	
}
.buttonLR::before,
.buttonLR::after {
	position: absolute;/* ここから共通*/
	z-index: -1;
	display: block;
	content: '';/* ここまで共通*/
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #b90b0b;
}
.buttonLR,
.buttonLR::before,
.buttonLR::after {
	-webkit-box-sizing: border-box;/* ここから共通*/
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;/* ここまで共通*/
}
.buttonLR:hover {
	background-color: #fff;
	border-color: #fb9935;
	color: #fb9935;
}
.buttonLR::before {
	right: 0;
}
.buttonLR::after {
	left: 0;
}
.buttonLR:hover::before,
.buttonLR:hover::after {
	width: 0;
	background-color: #fb9935;
}

結果

左右に開くボタン

上下に開くようなボタン

HTML

<div align="center">
<a class="buttonUD" href="#">上下に開くボタン</a>
</div>

CSS

.buttonUD {
	display: inline-block;/* ここから共通*/
	width: 250px;
	height: 60px;
	text-align: center;
	text-decoration: none;
	line-height: 60px;
	outline: none;/* ここまで共通*/
	position: relative;
	z-index: 2;
	background-color: #b90b0b;
	border: 2px solid #b90b0b;
	color: #fff;
}
.buttonUD::before,
.buttonUD::after {
	position: absolute;/* ここから共通*/
	z-index: -1;
	display: block;
	content: '';/* ここまで共通*/
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #b90b0b;
}
.buttonUD,
.buttonUD::before,
.buttonUD::after {
	-webkit-box-sizing: border-box;/* ここから共通*/
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;/* ここまで共通*/
}
.buttonUD:hover {
	background-color: #fff;
	border-color: #fb9935;
	color: #fb9935;
}
.buttonUD::before {
	top: 0;
}
.buttonUD::after {
	bottom: 0;
}
.buttonUD:hover::before,
.buttonUD:hover::after {
	height: 0;
	background-color: #fb9935;
}

結果

上下に開くボタン



「HTML/CSSに関する書籍」を
アマゾンで探す     
    
「ホームページ作成ソフト」
yahooで探す       

スポンサードリンク


コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA