Button by Creatlydev
#e8e8e8
1.button { 2 line-height: 1; 3 text-decoration: none; 4 display: inline-flex; 5 align-items: center; 6 gap: .75rem; 7 background-color: var(--clr); 8 color: #fff; 9 border-radius: 10rem; 10 font-weight: 600; 11 padding: .75rem 1.5rem; 12 padding-left: 20px; 13 white-space: nowrap; 14 overflow: hidden; 15 text-overflow: ellipsis; 16 transition: background-color .3s; 17} 18 19.button__icon-wrapper { 20 flex-shrink: 0; 21 width: 25px; 22 height: 25px; 23 position: relative; 24 color: var(--clr); 25 background-color: #fff; 26 border-radius: 50%; 27 display: grid; 28 place-items: center; 29 overflow: hidden; 30} 31 32.button:hover { 33 background-color: #000; 34} 35 36.button:hover .button__icon-wrapper { 37 color: #000; 38} 39 40.button__icon-svg--copy { 41 position: absolute; 42 transform: translate(-150%, 150%); 43} 44 45.button:hover .button__icon-svg:first-child { 46 transition: transform .3s ease-in-out; 47 transform: translate(150%, -150%); 48} 49 50.button:hover .button__icon-svg--copy { 51 transition: transform .3s ease-in-out .1s; 52 transform: translate(0); 53}
5K views
5K views
Variations
1 MIT License