webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

すぐに使える基本のホバーエフェクト
この記事を書いている人
Marie

Marie

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

基本のコード

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デザイナー

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

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

 <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%;
}

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


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

Home Webデザイン コーディング コピペ用コード 超基本【CSS】ボタンの”ホバーエフェクト”とりあえずこれ

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。