超基本【CSS】ボタンの”ホバーエフェクト”とりあえずこれ

2024/07/03 | 2024/10/18 727

この記事を書いている人

Marie

フリーランスwebデザイナー＆講師
制作会社・インハウスデザイナーを経験し独立
オンラインwebデザイン教室ちいウェブ運営
仕事の合間の息抜きに植物を育てています♡
スプラ・DIY・将棋がすき
小4・年長の母

もっと詳しくみる

[目次]

1 基本のコード
- 1.1 CSS
2 ホバーでふんわり色をつける
3 背景色のみ透明度を下げる
4 色が左に消える
5 色が上に消える
6 角丸に
7 押したように下へ
8 回転させる
9 キラッと光る
10 ボーダーを動かす

基本のコード

CSS

.btn {
	font-style: normal;
	position: relative;
	display: block;
	width: 300px;
	max-width: 80%;
	margin: 2em auto 4em;
	border: 1px solid rgb(34,34,34);
	transition: .5s;
	font-weight: lighter;
	text-align: center;
	letter-spacing: 2px;
	font-size: 80%;
}
.btn a {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: block;
	color: rgb(34, 34, 34);
	padding: .8em 0;
	text-decoration: none;
}

↑こちらのCSSをコピーした後、各エフェクトのCSSを追記してください Webデザイナー

クリックでコードへ飛べます

View More	View More	View More
View More	View More	View More
View More	View More	View More

ホバーでふんわり色をつける

 <div class="btn btn1">
    <a href="#">View More</a>
 </div>

.btn1:hover {
  background: #d1c4bd;
}

背景色のみ透明度を下げる

 <div class="btn btn2">
    <a href="#">View More</a>
 </div>

.btn2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #c5dbeb;
  transition: 1s;
}
.btn2:hover::before {
  opacity: .3;
}

色が左に消える

 <div class="btn btn3">
    <a href="#">View More</a>
 </div>

.btn3::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #e3e4f6;
  transition: 1s;
}
.btn3:hover::before {
  width: 0;
}

色が上に消える

 <div class="btn btn8">
    <a href="#">View More</a>
 </div>

.btn8::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #e3e4f6;
  transition: 1s;
}
.btn8:hover::before {
  height: 0;
}

角丸に

 <div class="btn btn4">
    <a href="#">View More</a>
 </div>

.btn4:hover {
  border-radius: 20px;
}

押したように下へ

 <div class="btn btn5">
    <a href="#">View More</a>
 </div>

.btn5::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666;
    z-index: 0;
}
.btn5 a {
    z-index: 1;
    transform: translateY(-5px);
    background: white;
    transition: .4s;
    border: 1px solid #222;
}
.btn5:hover a {
    transform: translateY(0);
}
.btn5 {
    border: none;
}

回転させる

<div class="btn btn6">
    <a href="#" data-text="View More">View More</a>
 </div>

.btn6 {
	border: none;
}

.btn6 {
	transition: .3s;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	overflow: hidden;
	padding: 0;
}

.btn6 a {
	position: relative;
	display: block;
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	transition: .4s;
	background-color: #efefef;
	width: 100%;
	height: 100%;
	padding: .8em 0;
}

.btn6 a::after {
	width: 100%;
	padding: .8em 0;
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-text);
	text-align: center;
	background-color: #d1c4bd;
	display: inline-block;
	transform-origin: 50% 0;
	transform: translate3d(0, 100%, 0) rotateX(-90deg);
}

.btn6 a:hover {
	transform: translate3d(0, 0, -60px) rotateX(90deg);
}

キラッと光る

<div class="btn btn7">
    <a href="#">View More</a>
 </div>

.btn7 {
	background: #c5dbeb;
}

.btn7 a {
	overflow: hidden;
}

.btn7 a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
	transition: .5s;
}

.btn7 a:hover::before {
	top: 0;
	left: 100%;
}

ボーダーを動かす

<div class="btn btn_border">
    <a href="#">View More</a>
 </div>

.btn_border a {
	position: relative;
}

.btn_border {
	border: none;
	background: rgba(255, 255, 255, .4);
}

.btn_border::after,
.btn_border::before,
.btn_border a::after,
.btn_border a::before {
	background: #222;
	content: "";
	display: block;
	position: absolute;
	z-index: 10;
	transition: .3s;
}

.btn_border::after {
	width: 0px;
	height: 1px;
	top: 0;
	left: 0;
}

.btn_border::before {
	width: 0px;
	height: 1px;
	right: 0;
	bottom: 0;
}

.btn_border a::after {
	width: 1px;
	height: 0;
	left: 0;
	bottom: 0;
}

.btn_border a::before {
	width: 1px;
	height: 0;
	top: 0;
	right: 0;
}

.btn_border:hover::after,
.btn_border:hover::before {
	width: 100%;
}

.btn_border:hover a::after,
.btn_border:hover a::before {
	height: 100%;
}