#212121
1/* Yoinked from CodePen, but improved the animation 2so that it is smooth among other more minor things */ 3 4.codepen-button { 5 display: block; 6 cursor: pointer; 7 color: white; 8 margin: 0 auto; 9 position: relative; 10 text-decoration: none; 11 font-weight: 600; 12 border-radius: 6px; 13 overflow: hidden; 14 padding: 3px; 15 isolation: isolate; 16} 17 18.codepen-button::before { 19 content: ""; 20 position: absolute; 21 top: 0; 22 left: 0; 23 width: 400%; 24 height: 100%; 25 background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b); 26 background-size: 25% 100%; 27 animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite; 28 animation-play-state: paused; 29 translate: -5% 0%; 30 transition: translate 0.25s ease-out; 31} 32 33.codepen-button:hover::before { 34 animation-play-state: running; 35 transition-duration: 0.75s; 36 translate: 0% 0%; 37} 38 39@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop { 40 to { 41 transform: translateX(-25%); 42 } 43} 44 45.codepen-button span { 46 position: relative; 47 display: block; 48 padding: 1rem 1.5rem; 49 font-size: 1.1rem; 50 background: #000; 51 border-radius: 3px; 52 height: 100%; 53}
Comments
1RuthBlossom 11. August at 13:01
11. August at 13:01
I love this button. I used it to do a project. thank you
MIT License