Button by purplemanta6754
#212121
1button { 2 border-radius: 0.25rem; 3 text-transform: uppercase; 4 font-style: normal; 5 font-weight: 400; 6 padding-left: 25px; 7 padding-right: 25px; 8 color: #fff; 9 -webkit-clip-path: polygon( 10 0 0, 11 0 0, 12 100% 0, 13 100% 0, 14 100% calc(100% - 15px), 15 calc(100% - 15px) 100%, 16 15px 100%, 17 0 100% 18 ); 19 clip-path: polygon( 20 0 0, 21 0 0, 22 100% 0, 23 100% 0, 24 100% calc(100% - 15px), 25 calc(100% - 15px) 100%, 26 15px 100%, 27 0 100% 28 ); 29 height: 40px; 30 font-size: 0.7rem; 31 line-height: 14px; 32 letter-spacing: 1.2px; 33 transition: 0.2s 0.1s; 34 background-image: linear-gradient(90deg, #28285a, #6220fb); 35 border: 0 solid; 36 overflow: hidden; 37} 38 39button:hover { 40 cursor: pointer; 41 text-decoration: underline; 42 text-underline-offset: 4px; 43 font-weight: 600; 44 color: #000; 45 transition: all 0.1s ease-in; 46 background-image: linear-gradient(90deg, #9472e1, #6220fb); 47 padding-right: 32px; 48 padding-left: 32px; 49} 50 51button:active { 52 opacity: 0.5; 53 transition: all 0s; 54} 55
313 views
Variation of abutton
MIT License