Button by Pradeepsaranbishnoi
#e8e8e8
1.mybutton { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.button { 8 all: unset; 9 display: flex; 10 justify-content: center; 11 align-items: center; 12 column-gap: .5em; 13 position: relative; 14 border-radius: 50px; 15 padding: 16px 24px; 16 background-color: #f0f7fa; 17 box-shadow: inset 0 -4px 8px #87bfd8, 0 4px 6px rgba(0, 0, 0, 0.2); 18 cursor: pointer; 19 color: #0470e3; 20 transition: transform 0.4s cubic-bezier(0.55, 1, 0.15, 1); 21 will-change: transform; 22} 23 24.button:active { 25 transform: scale(0.92); 26} 27 28.button:active::after { 29 opacity: 1; 30 outline: none; 31 border: 0; 32} 33 34.button::after { 35 content: ''; 36 position: absolute; 37 inset: 0; 38 border-image-slice: 50%; 39 border-image-width: 40px; 40 border-style: solid; 41 transform: scale(1.04, 1.08); 42 opacity: 0; 43 border: 0; 44 transition-property: opacity; 45 transition-duration: .4s; 46 transition-timing-function: cubic-bezier(0.55, 1, 0.15, 1); 47 will-change: transform; 48} 49
989 views
989 views
MIT License