Button by Subaashbala
#e8e8e8
1button { 2 display: flex; 3 justify-content: space-around; 4 align-items: center; 5 padding: 1em 0em 1em 1em; 6 background-color: yellow; 7 cursor: pointer; 8 box-shadow: 4px 6px 0px black; 9 border: 4px solid; 10 border-radius: 15px; 11 position: relative; 12 overflow: hidden; 13 z-index: 100; 14 transition: box-shadow 250ms, transform 250ms, filter 50ms; 15} 16button:hover { 17 transform: translate(2px, 2px); 18 box-shadow: 2px 3px 0px black; 19} 20button:active { 21 filter: saturate(0.75); 22} 23button::after { 24 content: ""; 25 position: absolute; 26 inset: 0; 27 background-color: pink; 28 z-index: -1; 29 transform: translateX(-100%); 30 transition: transform 250ms; 31} 32button:hover::after { 33 transform: translateX(0); 34} 35.bgContainer { 36 position: relative; 37 display: flex; 38 justify-content: start; 39 align-items: center; 40 overflow: hidden; 41 max-width: 35%; /* adjust this if the button text is not proper */ 42 font-size: 2em; 43 font-weight: 600; 44} 45.bgContainer span { 46 position: relative; 47 transform: translateX(-100%); 48 transition: all 250ms; 49} 50.button:hover .bgContainer > span { 51 transform: translateX(0); 52} 53.arrowContainer { 54 padding: 1em; 55 margin-inline-end: 1em; 56 border: 4px solid; 57 border-radius: 50%; 58 background-color: pink; 59 position: relative; 60 overflow: hidden; 61 transition: transform 250ms, background-color 250ms; 62 z-index: 100; 63} 64.arrowContainer::after { 65 content: ""; 66 position: absolute; 67 inset: 0; 68 border-radius: inherit; 69 background-color: yellow; 70 transform: translateX(-100%); 71 z-index: -1; 72 transition: transform 250ms ease-in-out; 73} 74button:hover .arrowContainer::after { 75 transform: translateX(0); 76} 77button:hover .arrowContainer { 78 transform: translateX(5px); 79} 80button:active .arrowContainer { 81 transform: translateX(8px); 82} 83.arrowContainer svg { 84 vertical-align: middle; 85} 86
288 views
288 views
MIT License