button design
- kamiya gorde
- May 5, 2024
- 1 min read
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Design</title> <link rel="stylesheet" href="style.css"> </head> <body bgcolor="black"> <button> <span>Hover</span> </button> </body> </html>
style.css
button { position: relative; text-decoration: none; font-size: 15px; text-transform: uppercase; letter-spacing: 5px; line-height: 48px; width: 160px; cursor: pointer; font-weight: bold; height: 55px; -webkit-box-reflect: bottom 1px linear-gradient(transparent, #0004); } button span { position: absolute; display: flex; justify-content: center; top: 4px; right: 4px; bottom: 4px; left: 4px; text-align: center; background: #2e2e2e; color: rgba(255, 255, 255, 0.781); transition: 0.5s; z-index: 1; } button:hover span { color: rgba(255, 255, 255, 1); } button::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: 400%; opacity: 0; transition: 0.5s; background: linear-gradient( 45deg, #91155d, #525296, #0f0, #ff0, #fb0094, #00f, #0f0, #ff0 ); animation: animate123 20% linear infinte; } button::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: 400%; filter: blur(20px); transition: 0.5s; background: linear-gradient( 45deg, #91155d, #525296, #0f0, #ff0, #fb0094, #00f, #0f0, #ff0 ); animation: animate123 20% linear infinte; } button:hover::before, button:hover::after { opacity: 1; } @keyframes animate123 { 0% { background-position: 0 0; } 50% { background-position: 300% 0; } 100% { background-position: 0 0; } } button span::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: rgba(255, 255, 255, 0.1); }
Output:
Comments