Button by gharsh11032000
#212121
1.button { 2 position: relative; 3 text-decoration: none; 4 font-size: 17px; 5 font-weight: 600; 6 text-transform: uppercase; 7 background-color: #e8e8e8; 8 padding: 15px 30px; 9 cursor: pointer; 10 border: none; 11 border-radius: 10px; 12 overflow: hidden; 13 transition: all 0.4s ease; 14} 15 16.button:before { 17 content: ""; 18 position: absolute; 19 pointer-events: none; 20 width: 100%; 21 height: 20%; 22 background-color: #e8e8e8; 23 translate: -100% 0; 24 rotate: 45deg; 25 transition: all 0.4s ease; 26} 27 28.button:hover { 29 color: #e8e8e8; 30 background-color: #8364e8; 31 box-shadow: 0 0 24px 8px rgba(131, 100, 232, 0.4); 32} 33 34.button:hover:before { 35 translate: 100%; 36} 37 38.button:active { 39 scale: 0.95; 40 box-shadow: 0 0 16px 4px rgba(131, 100, 232, 0.4); 41} 42
644 views
644 views
MIT License