<pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Button Hover Effect</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <a href="#" style="--clr: #ff22bb; --i: 0"> <span>Button</span> </a> <a href="#" style="--clr: #00ccff; --i: 1"> <span>Buttonfdfdfd</span> </a> <a href="#" style="--clr: #22e622; --i: 2"> <span>Button</span> </a> </div> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; } .container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; width: 100%; min-height: 100vh; background: #0e1538; } a{ position: relative; padding: 20px 60px; display: flex; justify-content: center; align-items: center; background: rgb(0, 0, 0, 0.5); margin: 40px; transition: 1s; overflow: hidden; text-decoration: none; } a:hover { background: var(--clr); box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr), 0 0 60px var(--clr), 0 0 10px var(--clr); } a::before { content: ''; position: absolute; width: 40px; height: 400%; background: var(--clr); transition: 1s; animation: animate 2s linear infinite; animation-delay: calc(0.33s * var(--i)); } a:hover::before{ width: 120%; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } a::after { content: ''; position: absolute; background: #0e1538; inset: 4px; transition: 0.5s; } a:hover::after { background: var(--clr); z-index: 1; font-size: 2em; color: #fff; opacity: 0.8; text-transform: uppercase; letter-spacing: 4px; transition: 0.5s; } a:hover span { opacity: 1; color: #0e1538; }
instead of and heading tags but nothing is showing inside the buttons.
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)