Glowing Button Using CSS
Creating a Glowing Button Using Html and CSS
Output:
.png)
Description:
This post covers how to create a simple Glowing Button style with Html and CSS. Here I have used box-shadow property in CSS for glowing effect and transition for animation.
Apps Download Link:
Html Editor: https://www.saffrosoft.ml/html_editor.html
Coding Keyboard: https://www.saffrosoft.ml/coding_keyboard.html
Code:
GlowingButton.html
<link rel="stylesheet" href="ButtonStyle.css">
Button tag in body tag
<button>Glowing Button</button>
ButtonStyle.css
Making html and body tag match its width and height to 100%. Also making the box-sizing to border-box for better view.
html, body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
Making the body tag as flex to place the Button tag in center of the screen. And setting its background color to Black and margin as zero.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
margin: 0;
}
Setting the Button tag's padding to 15px 20px as it means 15px padding on top and bottom, 20px padding on left and right of the tag. Making it's border to none and border radius to 50px for curved button. Setting it's background and foreground color as #b50954 and white. Next setting the important glowing property, box-shadow and the transition as 0.5 second.
button {
padding: 15px 25px;
border: none;
border-radius: 50px;
background-color: #b50954;
color: white;
box-shadow: 0 0 10px #b50954ee, 0 0 20px #b50954aa, 0 0 30px #b5095499;
transition: 0.5s;
}
Then, altering the foreground and background color of the button when mouse is place on it.
button:hover {
color: #b50954;
background-color: white;
transition: 0.5s;
}
Final Code:
GlowingButton.html
<!doctype html>
<html>
<head>
<title>Glowing Button</title>
<link rel="stylesheet" href="ButtonStyle.css">
</head>
<body>
<button>Glowing Button</button>
</body>
</html>
ButtonStyle.css
html, body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
margin: 0;
}
button {
padding: 15px 25px;
border: none;
border-radius: 50px;
background-color: #b50954;
color: white;
box-shadow: 0 0 10px #b50954ee, 0 0 20px #b50954aa, 0 0 30px #b5095499;
transition: 0.5s;
}
button:hover {
color: #b50954;
background-color: white;
transition: 0.5s;
}
Comments
Post a Comment