CSS Button With Glossy Background Color

This CSS code snippet helps you to create button element with glossy background color. The glossy button has a distinct border, padding, and vibrant colors, while the normal button has a simpler design with a gradient background.

Both buttons are usable in your project. You just need to include CSS code into your webpage to make the buttons glossy.

How to Create CSS Button with Glossy Background Color

1. First, create a container for your buttons in the HTML file. Use the <div> element with the class “button-container” to organize your buttons neatly. Inside each container, add a <button> element with a unique class (“button before” or “button after”) and an accompanying <label> for clarity.

<div class="button-container">
  <button class="button before" id="before" type="button">Glossy Button</button>
  <label class="button-label" for="before"> Glossy background </label>
</div>

<div class="button-container">
  <button class="button after" id="before" type="button">Normal Button</button>
  <label class="button-label" for="before"> Normal style </label>
</div>

2. Now, let’s dive into the CSS code. The following styles define the appearance and behavior of the buttons. The “button before” class creates a glossy button, while the “button after” class generates a button with a normal style.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3em;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Open Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.button.before {
  position: relative;
  border: 1px solid #0360df;
  border-radius: 50px;
  padding: 8px 16px;
  min-width: 8em;
  background-color: #0360df;
  background-image: radial-gradient(75% 50% at 50% 0%, #f4feff, transparent), radial-gradient(75% 35% at 50% 85%, #8de3fc, transparent);
  box-shadow: inset 0 -2px 4px 1px rgba(17, 110, 231, 0.6), inset 0 -4px 4px 1px #8de3fc, inset 0 0 2px 1px rgba(255, 255, 255, 0.2), 0 1px 4px 1px rgba(17, 110, 231, 0.2), 0 1px 4px 1px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 1px #116ee7;
  transition-property: border-color, transform, background-color;
  transition-duration: 0.2s;
}
.button.before::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px;
  width: 80%;
  height: 40%;
  background-image: linear-gradient(to bottom, #f4feff, transparent);
  opacity: 0.75;
}
.button.before:hover {
  transform: scale(1.04);
}
.button.before:active {
  border-color: #0048d5;
  transform: scale(0.96);
  background-color: #0048d5;
}

.button.after {
  position: relative;
  z-index: 0;
  border: 1px solid #3247cf;
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 8em;
  background-image: linear-gradient(180deg, #4098ff, #4058ff 62%, #4075ff);
  box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 0px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  font-family: "Roobert", sans-serif;
  font-weight: 500;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  transition-property: border-color, transform;
  transition-duration: 0.2s;
  will-change: transform;
}
@media (hover: hover) {
  .button.after:hover {
    transform: scale(1.04);
  }
}
.button.after:active {
  border-color: #192ba1;
  transform: scale(0.98);
}
.button.after::before, .button.after::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 7px;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
}
.button.after::before {
  background-image: linear-gradient(180deg, #40a6ff, #4058ff 62%, #4075ff);
  box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 0px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) {
  .button.after:hover::before {
    opacity: 1;
  }
}
.button.after::after {
  background-image: linear-gradient(180deg, #0a40ce, #4058ff 38%, #40a0ff);
  box-shadow: inset 0 1px 1px #0b1c95;
}
.button.after:active::after {
  opacity: 1;
}

.button-label {
  font-style: italic;
  color: #c0c0d8;
}

Experiment with different values for properties such as border-radius, background-color, and box-shadow to achieve the desired look for your buttons. You can also adjust the transition properties to control the animation during hover and click events.

That’s all! hopefully, you have successfully created buttons with a glossy background color on your webpage. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.