Glass effect social media buttons with neon glow

Open In Editor Publish Your Code Need a Website?

.glass-btn {
  width: 100px;
  height: 100px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  margin-left: 1em;
  margin-right: 1em;
  cursor: pointer;
  transition: all 0.3s;
}
.glass-btn.blue-btn {
  box-shadow: 0px 20px 20px -17px rgba(0, 111, 255, 0.53);
}
.glass-btn.blue-btn:hover {
  box-shadow: 0px 20px 35px -16px rgba(0, 111, 255, 0.65);
}
.glass-btn.blue-btn .content {
  font-size: 4em;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(to right, #006fff, #00acff 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 10px 37px rgba(0, 111, 255, 0.8);
}
.glass-btn.red-btn {
  box-shadow: 0px 20px 20px -17px rgba(255, 16, 39, 0.5);
}
.glass-btn.red-btn:hover {
  box-shadow: 0px 20px 35px -16px rgba(255, 16, 39, 0.57);
}
.glass-btn.red-btn .content {
  font-size: 4em;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(to right, #ff1027, #ff4f06 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 10px 37px rgba(255, 16, 39, 0.6);
}
.glass-btn.amber-btn {
  box-shadow: 0px 20px 20px -17px rgba(255, 159, 16, 0.53);
}
.glass-btn.amber-btn:hover {
  box-shadow: 0px 20px 35px -16px rgba(255, 159, 16, 0.6);
}
.glass-btn.amber-btn .content {
  font-size: 4em;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(to right, #ff8d00, #f7ad07 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 10px 37px rgba(255, 94, 16, 0.7);
}
.glass-btn:hover {
  background-color: whitesmoke;
  transform: translateY(-5px);
  transition: all 0.3s;
}

Glass effect social media buttons with neon glow

Recommended

3D CSS Photo Frame Effect to Images

HTML Staircase Structure with CSS Classes

Infinite Orbit Animation with CSS Trigonometry

HTML

CSS

JS

Recommended

3D CSS Photo Frame Effect to Images

HTML Staircase Structure with CSS Classes

Infinite Orbit Animation with CSS Trigonometry

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS