Um código por securearray494

1277 securearray494

Abrir no Editor Publique Seu Código

Recomendado

16 June 2025

Mostradores de volume

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #151515;
}

.login-container {
  background: #1b1b1b;
  padding: 40px 35px 60px;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
  width: 370px;
}

h3 {
  text-align: center;
  color: #c7c7c7;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.input-group {
  margin-top: 20px;
  position: relative;
}

.input-group label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
}

.input-group input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.input-group input:focus {
  color: #339933;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1);
  background: linear-gradient(#333933, #222922);
  animation: glow 0.8s ease-out infinite alternate;
}

.input-group input:focus ~ label,
.input-group input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

@keyframes glow {
  0% {
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1);
  }
  100% {
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 0, 0.4);
  }
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.actions button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(#333, #222);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 30px;
  letter-spacing: 1px;
  transition: 0.5s;
}

.actions button:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}

.actions a {
  font-size: 12px;
  color: #03e9f4;
  text-decoration: none;
  margin-top: 25px;
}

.actions a:hover {
  text-decoration: underline;
}

Um código por securearray494

Recomendado

Um código de Mete

Um código de Metr

Mostradores de volume

HTML

CSS

JS

Recomendado

Um código de Mete

Um código de Metr

Mostradores de volume

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS