ホバーした時にCSSだけで出来る様々な画像切り替え方法|その2

CSS
この記事は約25分で読めます。
スポンサーリンク

CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。
前回ご紹介した画像切り替え方法が検索ロボットに気に入ってもらえたので
もっともっと沢山のホバー演出をコピペで出来るように作りたいと思います。

今回も基本のHTMLは同じものを利用します。
このHTMLを書いて2枚画像を用意して、目的のCSSをコピペすれば同じ動きになります。

基本のHTML

<div class="btn">
  <a href="https://hajimete.org/">
    <img src="btn_img1.jpg" alt="ボタン画像1" />
    <img src="btn_img2.jpg" alt="ボタン画像2" />
  </a>
</div>

膨らんだボタンが凹んで画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: 1s .4s ease-in;
  transition: 1s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: 20px 20px 24px -20px rgb(255,255,255,.8) inset, -20px -18px 24px -20px rgb(0,0,0,.3) inset;
}
.btn:hover:after {
  box-shadow: 18px 20px 21px -20px rgb(0,0,0,.3) inset;
  background: rgba(0,0,0,.1);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}

凹んだボタンがさらに凹んで画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: 1s .4s ease-in;
  transition: 1s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: 12px 16px 21px -20px rgb(0,0,0,.4) inset;
}
.btn:hover:after {
  box-shadow: 18px 20px 21px -20px rgb(0,0,0,.3) inset;
  background: rgba(0,0,0,.3);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}

グイっと押され画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 0px rgb(62, 122, 138);
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-transition: .6s cubic-bezier(0.32, 0, 0.67, 0);
  transition: .6s cubic-bezier(0.32, 0, 0.67, 0);
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: .6s .4s ease-in;
  transition: .6s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
}
.btn:hover {
  box-shadow: 0 0px 0px rgb(62, 122, 138);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.btn:hover:after {
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
  background: rgba(255,255,255,.4);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}

押されたボタンがポコっと出て画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0px 0px rgb(62, 122, 138);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: .6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: .6s .4s ease-in;
  transition: .6s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
}
.btn:hover {
  box-shadow: 0 6px 0px rgb(62, 122, 138);
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}
.btn:hover:after {
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
  background: rgba(255,255,255,.4);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}

横に震えて画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: .6s .4s ease-in;
  transition: .6s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
}
.btn:hover {
  -webkit-animation: .1s shake linear infinite;
  animation: .1s shake linear infinite;
}
@-webkit-keyframes shake {
  0% {-webkit-transform: translateX(-4px)}
  50% {-webkit-transform: translateX(4px)}
  100% {-webkit-transform: translateX(-4px)}
}
@keyframes shake {
  0% {transform: translateX(-4px)}
  50% {transform: translateX(4px)}
  100% {transform: translateX(-4px)}
}
.btn:hover:after {
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
  background: rgba(255,255,255,.4);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}

縦に震えて画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: .6s .4s ease-in;
  transition: .6s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
}
.btn:hover {
  -webkit-animation: .1s shake2 linear infinite;
  animation: .1s shake2 linear infinite;
}
@-webkit-keyframes shake2 {
  0% {-webkit-transform: translateY(-4px)}
  50% {-webkit-transform: translateY(4px)}
  100% {-webkit-transform: translateY(-4px)}
}
@keyframes shake2 {
  0% {transform: translateY(-4px)}
  50% {transform: translateY(4px)}
  100% {transform: translateY(-4px)}
}
.btn:hover:after {
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
  background: rgba(255,255,255,.4);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}

線と画像が広がるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  width: 92%;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 260px;
  height: 60px;
  border: 1px solid rgba(62, 122, 138,1);
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:hover:after {
  width: 300px;
  height: 100px;
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
  width: 104%;
}

線と画像が小さくなるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  width: 110%;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 300px;
  height: 100px;
  border: 1px solid rgba(62, 122, 138,1);
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:hover:after {
  width: 260px;
  height: 60px;
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
  width: 100%;
}

線が広がって画像が小さくなるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  width: 110%;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 260px;
  height: 60px;
  border: 1px solid rgba(62, 122, 138,1);
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:hover:after {
  width: 300px;
  height: 100px;
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
  width: 100%;
}

線が小さくなって画像が広がるボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  width: 92%;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 300px;
  height: 100px;
  border: 1px solid rgba(62, 122, 138,1);
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn:hover:after {
  width: 260px;
  height: 60px;
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
  width: 104%;
}

ちょっと浮いて画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 16px 12px -15px rgb(0,0,0,0);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: .6s .4s ease-in;
  transition: .6s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
}
.btn:hover {
  box-shadow: 0 16px 29px -15px rgb(0,0,0,.3), 0 3px 8px -2px rgb(0,0,0,.1);
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}
.btn:hover:after {
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
  background: rgba(255,255,255,.4);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}

浮いてたボタンがちょっと沈んで画像がフェードするボタン

DEMO

ボタン画像1
ボタン画像2

CSS

.btn {
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 16px 29px -15px rgb(0,0,0,.3), 0 3px 8px -2px rgb(0,0,0,.1);
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
}
.btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.btn img:nth-of-type(2) {
  opacity: 0;
  -webkit-transition: .6s .4s ease-in;
  transition: .6s .2s ease-in;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
}
.btn:hover {
  box-shadow: 0 16px 12px -15px rgb(0,0,0,0);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.btn:hover:after {
  box-shadow: -18px -16px 21px -20px rgb(255,255,255,.8) inset;
  background: rgba(255,255,255,.4);
}
.btn:hover img:nth-of-type(2) {
  opacity: 1;
}
SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました