/* HTML */ <a href="#"><button class="button-07">Hover Me!</button></a> /* CSS */ .button-07 { padding: 0.9em 1.9em; font-size: 16px; border: none; background: #6285f8; color: white; cursor: pointer; position: relative; z-index: 1; } .button-07:hover { color: rgb(255, 255, 255); } .button-07::before,.button-07::after { content: ""; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background: rgba(128, 128, 128, 0.096); backdrop-filter: blur(10px); z-index: -1; transition: all 0.4s; } .button-07::after { z-index: -2; transition: all 0.4s; } .button-07:hover::before { background: rgb(0, 0, 0, 0.315); border-radius: 10px; } .button-07:hover::after { background: linear-gradient(to right, #cb6ce6, #38b6ff); border-radius: 10px; transform: scale(1.07, 1.2) rotateX(180deg); }
0 Comments