【cssだけで実装】hover時にテキストをスライドさせて入れ替える

hover時にスライドさせて入れ替える基本パターン

Demo

hoverすると、下からテキストがスライドインして、着地します。
hoverをはずすと、上からテキストがスライドして戻ってきて、着地します。

our works制作実績

html

<a href="*" target="_blank">
  <div class="slide_label">
    <span class="slide_label_text"><span>our works<span>制作実績</span></span></span>
  </div>
</a>

css

body {
  box-sizing: border-box; 
}
a {
  text-decoration: none;
  display: inline-block;
}
div.slide_label {
  text-align: center;
  width:12em; /* 最初から表示されているテキストのほうが文字数が多い場合は指定しなくても大丈夫
　　　　　　　　　　　　　　　　　　　　　　　　　　　 入れ替わるテキストのほうが文字数が多い場合は必須 */
  white-space: nowrap;
}
.slide_label_text {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.4em;
}
.slide_label_text > span > span {
  display: none;
}
@media only screen and (min-width: 768px) and (any-hover: hover) {
  .slide_label_text {
    display: block;
    overflow: hidden;
    padding: 3px 0;
  }
  .slide_label_text > span {
    position: relative;
    display: block;
    color: #3eb370;
    animation: slideLabelOff .3s cubic-bezier(0, 0.55, 0.45, 1) forwards, slideLabelOffDown .15s linear .3s forwards;
  }
  .slide_label_text > span > span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    display: block;
    color: #e95295;
  }
  a:hover .slide_label_text > span {
    animation: slideLabelHover .3s cubic-bezier(0, 0.55, 0.45, 1) forwards, slideLabelDown .15s linear .3s forwards;
  }
}

@keyframes slideLabelHover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-1.4em - 3px));
  }
}
@keyframes slideLabelDown {
  0% {
    transform: translateY(calc(-1.4em - 3px));
  }
  100% {
    transform: translateY(-1.4em);
  }
}
@keyframes slideLabelOff {
  0% {
    transform: translateY(-1.4em);
  }
  100% {
    transform: translateY(3px);
  }
}
@keyframes slideLabelOffDown {
  0% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}

基本パターンに追記してかわいいボタンにしてみる

上記のcssを変更してかわいいボタンにすることももちろん可能。
でも、divにクラス名を追加して装飾するほうが、違うデザインのボタンも配置したときのメンテナンスがしやすそう。

Demo

our works制作実績

html

<div class=”slide_label”>に”slide_label_button”クラスを追加。

<a href="*" target="_blank">
  <div class="slide_label slide_label_button">
    <span class="slide_label_text"><span>our works<span>制作実績</span></span></span>
  </div>
</a>

css

かわいいボタンにする用のcssを追加。

.slide_label_button {
  font-size: 1em;
  padding:2em;
  width:12em;
  background-image: linear-gradient(180deg, rgba(0, 25, 132, 1), rgba(0, 92, 159, 1));
  box-shadow: 0px 1px 3px #021878;
  border-radius: 12px;
}
.slide_label_button .slide_label_text {
  font-size: 1.2em;
}
.slide_label_button span,.slide_label_button span>span {
  letter-spacing: 0.1em;
  color: #fff;
  opacity: 0.95;
  text-shadow: 0px 2px 3px #021878;
}