Button by Mike11jr
#e8e8e8
1.btn { 2 padding: 0.9em 1.9em; 3 font-size: 16px; 4 border: none; 5 background: #6285f8; 6 color: white; 7 cursor: pointer; 8 position: relative; 9 z-index: 1; 10} 11 12.btn:hover { 13 color: rgb(255, 255, 255); 14} 15 16.btn::before,.btn::after { 17 content: ""; 18 position: absolute; 19 top: 0%; 20 left: 0%; 21 width: 100%; 22 height: 100%; 23 background: rgba(128, 128, 128, 0.096); 24 backdrop-filter: blur(10px); 25 z-index: -1; 26 transition: all 0.4s; 27} 28 29.btn::after { 30 z-index: -2; 31 transition: all 0.4s; 32} 33 34.btn:hover::before { 35 background: rgb(0, 0, 0, 0.315); 36 border-radius: 10px; 37} 38 39.btn:hover::after { 40 background: linear-gradient(to right, #cb6ce6, #38b6ff); 41 border-radius: 10px; 42 transform: scale(1.07, 1.2) rotateX(180deg); 43}
1.1K views
1.1K views
MIT License