dracslaura

wipe sideways links

Oct 12th, 2021
940
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2. a.wow:link { text-decoration: none; }
  3.  
  4. a.wow::before {
  5. transform: scaleX(0);
  6. transform-origin: bottom right;
  7. }
  8.  
  9. a.wow:hover::before {
  10. transform: scaleX(1);
  11. transform-origin: bottom left;
  12. }
  13.  
  14. a.wow::before {
  15. content: " ";
  16. display: block;
  17. position: absolute;
  18. top: 0; right: 0; bottom: 0; left: 0;
  19. inset: 0 0 0 0;
  20. background: #D64933;
  21. z-index: -1;
  22. transition: transform .5s ease;
  23. }
  24.  
  25. a.wow {
  26. position: relative;
  27. font-size: 2em;
  28. }
  29. </style>
  30. <a class="wow" href="#home">Wipe Sideways</a>
RAW Paste Data