HTML <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="playemoji.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="face"> <div class="eyes"> <div class="eye"></div> <div class="eye"></div> </div> </div> <script> document.querySelector('body').addEventListener('mousemove', eyeball); function eyeball() { var eye = document.querySelectorAll('.eye'); ...
Neon Button
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="NeonButton.css">
<title>NeonButton</title>
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
NeonButton
</a>
</body>
</html>
CSS Code
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: consolas;
}
a
{
position: relative;
display: inline-block;
padding: 15px 30px;
color: #1a94f8;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover
{
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
}
Comments