Button by Carlos-vargs
#212121
1.button { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 position: relative; 6 width: 100%; 7 border-radius: 36px; 8 font-weight: 700; 9 height: 54px; 10 font-size: 16px; 11 padding-inline: 20px; 12 background-color: transparent; 13 color: #fff; 14 text-transform: uppercase; 15 overflow: hidden; 16 text-align: center; 17 transition: all .25s ease-in-out; 18 z-index: 1; 19 border: none; 20} 21 22.button:is(:hover, :focus)::before { 23 transform: translateX(0%); 24} 25 26.text { 27 white-space: nowrap; 28 line-height: 1.2; 29 padding-inline-end: 44px; 30 z-index: 2; 31} 32 33/* change the width and height to 100% when you use it in your layout */ 34.button::after { 35 content: ''; 36 position: absolute; 37 height: calc(100% - 2px); 38 width: calc(100% - 2px); 39 border: 1px solid #FFB400; 40 border-radius: 36px; 41 z-index: 2; 42} 43 44.button::before { 45 content: ""; 46 position: absolute; 47 height: 100%; 48 width: 100%; 49 background-color: #FFB400; 50 z-index: 1; 51 left: -2px; 52 transform: translateX(90%); 53 transition: all .3s ease-out; 54} 55 56.icon { 57 display: inherit; 58 position: absolute; 59 top: 50%; 60 transform: translateY(-50%); 61 right: 0; 62 width: 54px; 63 height: 54px; 64 justify-content: center; 65 align-items: center; 66 border-radius: 100%; 67 background-color: #FFB400; 68 z-index: 2; 69} 70 71
1.1K views
1.1K views
MIT License