cssアニメーションで変化するボタン

MARKLEAPS

2021.09.03

ボタンを乗せた際に、変化があるとクリックしてみたくなりますよね。
CSSでhover時に変化するボタンのサンプルをご紹介します。

下線と右矢印が同時に右方向に伸びるボタン

More

サンプルコード
html

<a class="demo_btn01" href="#">More</a>

1	<a class="demo_btn01" href="#">More</a>

css

/* 下線付きのボタンを作る */
.demo_btn01 {
	display: block;
	font-size: 14px;
	letter-spacing: 2px;
	padding: 8px 0;
	width: 120px;
	border-bottom: 2px solid #00B2E6;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	position: relative;
}
/* 疑似要素で右矢印をつくりpositionで右端に配置 */
.demo_btn01::after {
	position: absolute;
	bottom: 10px;
	right: 0px;
	display: block;
	content: "";
	width: 7px;
	height: 7px;
	border-top: 1px solid #00B2E6;
	border-right: 1px solid #00B2E6;
	transform: rotate(45deg);
}
/* ホバー時にボタンの幅を伸ばす */
.demo_btn01:hover {
	width: 130px;
}

/* 下線付きのボタンを作る */

.demo_btn01 {

display: block;

font-size: 14px;

letter-spacing: 2px;

padding: 8px 0;

width: 120px;

border-bottom: 2px solid #00B2E6;

-webkit-transition: all .5s ease;

transition: all .5s ease;

position: relative;

}

/* 疑似要素で右矢印をつくりpositionで右端に配置 */

.demo_btn01::after {

position: absolute;

bottom: 10px;

right: 0px;

display: block;

content: "";

width: 7px;

height: 7px;

border-top: 1px solid #00B2E6;

border-right: 1px solid #00B2E6;

transform: rotate(45deg);

}

/* ホバー時にボタンの幅を伸ばす */

.demo_btn01:hover {

width: 130px;

}

片矢印が右方向に伸びるボタン

More

サンプルコード
html

<a class="demo_btn02" href="#">More</a>

1	<a class="demo_btn02" href="#">More</a>

css

.demo_btn02 {
	display: block;
	font-size: 14px;
	letter-spacing: 2px;
	padding: 8px 0;
	position: relative;
}
/* 疑似要素で片矢印をつくりpositionで配置 */
.demo_btn02::after {
	position: absolute;
	bottom: 0px;
	left: 0px;
	display: block;
	content: "";
	width: 120px;
	height: 8px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	transform: skew(45deg);
}
/* ホバー時に片矢印の幅を伸ばす */
.demo_btn02:hover::after {
	width: 130px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

.demo_btn02 {

display: block;

font-size: 14px;

letter-spacing: 2px;

padding: 8px 0;

position: relative;

}

/* 疑似要素で片矢印をつくりpositionで配置 */

.demo_btn02::after {

position: absolute;

bottom: 0px;

left: 0px;

display: block;

content: "";

width: 120px;

height: 8px;

border-bottom: 1px solid #000;

border-right: 1px solid #000;

transform: skew(45deg);

}

/* ホバー時に片矢印の幅を伸ばす */

.demo_btn02:hover::after {

width: 130px;

-webkit-transition: all .5s ease;

transition: all .5s ease;

}

グラデーションが反転するボタン

More

サンプルコード
html

<a class="demo_btn03" href="#">More</a>

1	<a class="demo_btn03" href="#">More</a>

css

.demo_btn03 {
	display: block;
	width: 250px;
	text-align: center;
	padding: 8px 8px;
	color: #FFFFFF;
	background: transparent;
	border-radius: 50px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.demo_btn03::before ,
.demo_btn03::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
}
/* グラデーション1 */
.demo_btn03::before {
	z-index: -1;
	transition: all .5s ease;
	background: linear-gradient(135deg, #FF0099 0%, #405DE6 100%);
}
/* グラデーション2 */
.demo_btn03::after {
	z-index: -2;
	background: linear-gradient(135deg, #405DE6 0%, #FF0099 100%);
}
/* ホバー時にグラデーション1を透明にする */
.demo_btn03:hover::before {
	opacity: 0;
}

.demo_btn03 {

display: block;

width: 250px;

text-align: center;

padding: 8px 8px;

color: #FFFFFF;

background: transparent;

border-radius: 50px;

overflow: hidden;

position: relative;

z-index: 0;

}

.demo_btn03::before ,

.demo_btn03::after {

position: absolute;

top: 0;

left: 0;

display: block;

content: "";

width: 100%;

height: 100%;

}

/* グラデーション1 */

.demo_btn03::before {

z-index: -1;

transition: all .5s ease;

background: linear-gradient(135deg, #FF0099 0%, #405DE6 100%);

}

/* グラデーション2 */

.demo_btn03::after {

z-index: -2;

background: linear-gradient(135deg, #405DE6 0%, #FF0099 100%);

}

/* ホバー時にグラデーション1を透明にする */

.demo_btn03:hover::before {

opacity: 0;

}

CSS

よく読まれている関連記事

CSSアニメーション　2つの機能