CSS Glass Button Effect

Glasmorfism UI design began to gain popularity around 2021. However, the concept of blurred background was first introduced by IOS 3 in the first Apple. Inspired by the Glasmorphism style, we will create a glass button effect. This visual effect button looks like a transparent glass. In short, CSS Glass Button Effect makes the web design more modern and attractive.

It is equally effective in both dark and light modes and can be easily customized using the CSS variable. So you can change the color and blur as needed. Let us start today's simple tutorial.

HTML

For the HTML code, we don’t need anything much but just an button element with the id ‘btn’.

<button id="btn">BUTTON</button>

CSS

Adding Basic Styling:

First, we will remove the default margin and padding of the body element. So that the content starts from the very edge. Then we will hide the content that goes outside using overflow.

Next, we set a light color background (hex code: #fdf9fd) and use radial-gradient on it to create a dark effect. The light color in the middle will gradually transform to a dark black color around it. As a result, the entire webpage gets an attractive background.

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fdf9fd;
  background: radial-gradient(ellipse at center, 
              rgba(68, 17, 0, 0.5) 0%, 
              rgba(0, 0, 0, 1) 100%);
}

Styling the Button:

We use the TRANSFORM method to center the button element. I have told you about this method in many tutorials. Use padding to create space around the text. You can give the text size designation as you wish. Next, we use a border radius to round the edges of the button.

We set a nice linear gradient as the background, which starts with light white from the top and gradually blends into the transparent black part, resulting in a glassy glow type effect. For the border, we set the border bottom width 2 pixels to make it slightly thinner at the bottom.

Finally, we will add a light bright shadow to the inside using box shadow. Thus, the button looks more like a 3D style.

#btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 40px;
  text-align: center;
  font-size: 100px;
  color: white;
  border-radius: 50px;
  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%);
  border-color: rgba(255, 255, 255, 0.2);
  border-image: none;
  border-style: groove;
  border-width: 3px;
  border-bottom-width: 2px;
  box-shadow: 0 -4px 8px -1px rgba(255, 255, 255, 0.4) inset;
}

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also to stay updated with the latest tutorial subscribe to me on Youtube.