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

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

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

基本のHTML

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

初めての目次

膨らんだボタンが凹んで画像がフェードするボタン
凹んだボタンがさらに凹んで画像がフェードするボタン
グイっと押され画像がフェードするボタン
押されたボタンがポコっと出て画像がフェードするボタン
横に震えて画像がフェードするボタン
縦に震えて画像がフェードするボタン
線と画像が広がるボタン
線と画像が小さくなるボタン
線が広がって画像が小さくなるボタン
線が小さくなって画像が広がるボタン
ちょっと浮いて画像がフェードするボタン
浮いてたボタンがちょっと沈んで画像がフェードするボタン

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

DEMO

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

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

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

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

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

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

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

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

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

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

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

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