Guest User

Untitled

a guest
Apr 24th, 2022
63
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.77 KB | None | 0 0
  1. .button {
  2.     display: block;
  3.     text-decoration: none;
  4.     color: #fff;
  5.     padding: 3px;
  6.     border-radius: 6px;
  7.     position: relative;
  8.     overflow: hidden;
  9. }
  10.  
  11. .button::before {
  12.     content: "";
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     width: 200%;
  17.     height: 100%;
  18.     background:
  19.             linear-gradient(115deg,
  20.             #000000,#373333,#808080);
  21.     background-size: 50% 100%;
  22.     border-radius: inherit;
  23.     }
  24.  
  25. .button:hover::before {
  26.     animation: animate_border .5s linear infinite;
  27. }
  28.  
  29. @keyframes animate_border {
  30.     to {
  31.         transform: translate(-50%)
  32.     }
  33. }
  34.  
  35. .button span {
  36.     display: block;
  37.     background-color: black;
  38.     padding: 5px;
  39.     border-radius: 3px;
  40.     position: relative;
  41.     z-index: 2;
  42. }
  43.  
Advertisement
Add Comment
Please, Sign In to add comment