Glowing Checkbox Button On Off Text Effects

Glowing Checkbox Button On Off Text Effects Code:

1.index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Glowing Button</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> ¨K0K </body> </html>

2.style.css:

body { margin: 0; padding: 0; background: black; } span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 90px; background: black; border: 4px solid green; font-size: 48px; color: green; text-align: center; line-height: 90px; border-radius: 90px; text-transform: uppercase; font-family: Verdana, Geneva, Tahoma, sans-serif; overflow: hidden; transition: 0.5s; } input { -webkit-appearance: none; transition: 0.5s; } input:hover + span { color: yellow; border: 4px solid yellow; } input:checked + span { color: red; border: 4px solid red; text-shadow: 0 0 5px red; box-shadow: 0 0 20px red, inset 0 0 20px red ; }

Оставьте комментарий