テキストにhoverしたときのエフェクトです。サンプルの青色テキストのそれぞれにhoverすると、テキスト名と同じような動き(「from top」なら上から)のアニメーションが発動し、青色で背景を塗りつぶしテキストは白色に変わります。hoverを外すと、逆の動きで元に戻ります。

サンプル


From Top
From Left
From Right
From Middle
From Bottom

サンプルのhtmlソース

  1. <div class="center">
  2. <div class="btn from-top">From Top</div>
  3. <div class="btn from-left">From Left</div>
  4. <div class="btn from-right">From Right</div>
  5. <div class="btn from-middle">From Middle</div>
  6. <div class="btn from-bottom">From Bottom</div>
  7. </div>

サンプルのCSSソース(from topの場合のみ)

  1. .btn {
  2. position: relative;
  3. padding: 1.4rem 2.2rem;
  4. padding-right: 1.2rem;
  5. font-size: 1.2rem;
  6. text-align:center;
  7. color: var(--inv);
  8. letter-spacing: 0.2rem;
  9. text-transform: uppercase;
  10. -webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
  11. transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
  12. -webkit-user-select: none;
  13. -moz-user-select: none;
  14. -ms-user-select: none;
  15. user-select: none;
  16. }
  17. .btn:before, .btn:after {
  18. content: '';
  19. position: absolute;
  20. -webkit-transition: inherit;
  21. transition: inherit;
  22. z-index: -1;
  23. }
  24. .btn:hover {
  25. color: var(--def);
  26. -webkit-transition-delay: .6s;
  27. transition-delay: .6s;
  28. }
  29. .btn:hover:before {
  30. -webkit-transition-delay: 0s;
  31. transition-delay: 0s;
  32. }
  33. .btn:hover:after {
  34. background: var(--inv);
  35. -webkit-transition-delay: .4s;
  36. transition-delay: .4s;
  37. }
  38. .from-top:before,
  39. .from-top:after {
  40. left: 0;
  41. height: 0;
  42. width: 100%;
  43. }
  44. .from-top:before {
  45. bottom: 0;
  46. border: 1px solid #69f;
  47. border-top: 0;
  48. border-bottom: 0;
  49. }
  50. .from-top:after {
  51. top: 0;
  52. height: 0;
  53. }
  54. .from-top:hover:before,
  55. .from-top:hover:after {
  56. height: 100%;
  57. }

 

 

 

引用と参考;https://codepen.io/perry_nt/pen/eVboze
戻るボタン