Hello wizards, Today in this blog you’ll learn how to create the Glowing Button (part-3) using HTML & CSS only. Earlier I have shared a blog on Simple Buttons(part-1) and Simple Button (part-2) and now its time to create a Glowing Button (part-3)
In the video, you’ve seen "How to design the Glowing Button (part-3)" . As you know, this is a pure CSS program that means only HTML & CSS are used to create this button.
SOURCE CODE
To create this Glowing Button (part-3) . First, you need to create one file for HTML code and CSS code is internally added in HTML file. After creating the file just paste the following codes in your file. Remember, you’ve to create a file with .html extension.
You can also download source code file from the given download button.
HTML
<!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-3</title>
</head>
<style>
body {
margin: 0;
padding: 0;
display: grid;
place-content: center;
height: 100vh;
background-color: black;
}
.btn {
width: 150px;
height: 50px;
font-size: 24px;
font-weight: 600;
letter-spacing: 2px;
border: 3px solid yellow;
background: none;
color: yellow;
cursor: pointer;
}
.btn:hover {
color: black;
background-color: yellow;
box-shadow: 0 0 25px yellow, 0 0 50px yellow, 0 0 75px yellow, 0 0 100px yellow;
}
</style>
<body>
<button class="btn">BUTTON</button>
</body>
</html>
Generating Download Link...