Did you know? Glassmorphism is a UI design style known for its blurred background effects.
It started gaining popularity among web developers in 2021. However, Apple first introduced this visual style in iOS 3. Inspired by this design trend, today we will show you how to create a Glass Button Effect using HTML and CSS.
Table of Content
Glsss Button Folder Structure:
First, create a folder for the project. In your project folder, create two files named index.html and style.css. These two are HTML document and a stylesheet file.
If you are still having trouble setting up your project, check out our detailed guide on How to Structure an HTML Project to learn the proper folder setup.
HTML:
We have created a HTML <button> element and set it an id attribute with the value "btn". Then add a Text inside this button element, as written here "BUTTON". HTML code is over, now come to CSS.
<button id="btn">BUTTON</button>Live Demo:
Below is a live demo to help you see how the CSS Glass Button works. Click "Run Code" to see the button live.
CSS:
Styling the body:
First we will set up some basics, such as setting the default margins and padding of the HTML document body to 0. It wasn't necessary to do this, but it's the best habit. Then the page overflow is hidden, which instructs the browser to clip any content that exceeds the specified width and height of the glass button. Now the basic setup is complete.
Finally, we set the body background color to the hex code #441100. You can try the CSS radial-gradient() function for the background here. This function can increase focus on the button.
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #441100;
}Styling the Button:
Now we will style the button element using the id #btn. So let us start by cantering the glass button using the Transform Method.
Next, we added 20px of padding to the top and bottom, and 40px to the left and right of the text inside the button. To center the text, we use the CSS text-align property. Another important aspect is setting the text color.
Light colored text stands out better against a dark background, so we set the text color to white. You can adjust the text size as you like using the CSS font-size property. However, keep in mind that increasing the text size will also make the glass button larger.
#btn {
/*Transform cantering methood*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*Basic text set up*/
padding: 20px 40px;
text-align: center;
font-size: 100px;
/*Button background and text color*/
color: white;
background: linear-gradient(170deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.7) 20%,
rgba(255, 255, 255, 0.2) 55%,
rgba(0, 0, 0, 0.0) 56%,
rgba(0, 0, 0, 0.0) 100%);
/*styling the button border*/
border-radius: 50px;
border-color: rgba(255, 255, 255, 0.2);
border-image: none;
border-style: groove;
border-width: 3px;
border-bottom-width: 2px;
/*Glass button shadow*/
box-shadow: 0 -4px 8px -1px rgba(255, 255, 255, 0.4) inset;
}Now our wait is over—let us start styling the glass effect. First, we set the CSS border-radius property to 50px to give the button smoothly rounded corners.
The main step is to set the glass button background using the CSS linear-gradient() function. We will create a gradient that transitions from 0% to 55% at a 170degree angle to a semi-transparent white, and after 55%, it becomes fully transparent. Now the main part of the glass button effect is complete.
Then we used the CSS border and box-shadow properties to make it look more realistic.
I hope you all enjoyed the Glass Button Effect tutorial. For more quick updates and coding tips, check out our Codehemu YouTube channel. If you have any questions or face any issues, just leave a comment below. Bye bye developers. See you in the next tutorial!
0 Comments