Button by santhoshsj-dev
#212121
1.button { 2 appearance: none; 3 background: transparent; 4 border: 0; 5 color: #fff; 6 cursor: pointer; 7 font: inherit; 8 font-weight: 500; 9 line-height: 1; 10 padding: 1em 1.5em; 11 position: relative; 12 transition: filter 0.3s; 13} 14 15.button:hover { 16 filter: brightness(1.1); 17} 18 19.button:active { 20 filter: brightness(0.9); 21} 22 23.button>span { 24 display: block; 25 position: relative; 26 transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); 27 z-index: 1; 28} 29 30.button:hover>span { 31 transform: scale(1.05); 32} 33 34.button:active>span { 35 transform: scale(0.95); 36} 37 38.button>svg { 39 fill: #0c2cde; 40 position: absolute; 41 top: -5%; 42 left: -5%; 43 width: 110%; 44 height: 110%; 45} 46 47.button>svg>path { 48 transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); 49} 50 51.button:hover>svg>path { 52 d: path("M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0"); 53} 54 55.button:active>svg>path { 56 d: path("M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0"); 57}
644 views
644 views
MIT License