CSS Button With Glossy Background Color

CSS Button With Glossy Background Color
Code Snippet:Buttons - Before / After
Author: Nicolas Jesenberger
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 745
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X