Um código por ytr3d3

1523 ytr3d3

Abrir no Editor Video Publique Seu Código

Recomendado

31 May 2025

Um Código por alejandrokundrah

29 July 2025

Um Código de Liamgilles76

HTML

CSS

html,
body {
  background-color: #222222;
  transition: all 0.3s;
  height: 100%;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.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;
}

Um código por ytr3d3

Recomendado

Um Código por alejandrokundrah

Um código do texto

Um Código de Liamgilles76

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Um código do texto

Um Código de Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS