Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

12 June 2025

Efeito de foco de botão animado em CSS

HTML

CSS

* {
  box-sizing: border-box;
  }
  
  *:focus {
    outline: none;
  }
  body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000000; 
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  }
.button{
    display: flex;
  justify-content: center;
  align-items: center;
}
 .form-container {
  width: 420px;
  border: 1px solid #414141;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 16px;
}

.form-container button:active {
  scale: 0.95;
}

.form-container .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #717171;
  font-weight: 600;
  font-size: 12px;
}

.form-container .form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid #414141;
}

.form-container .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  resize: none;
  color: #fff;
  height: 96px;
  border: 1px solid #414141;
  background-color: transparent;
  font-family: inherit;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-group textarea:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-submit-btn {
  font-family: inherit;
  color: #717171;
  font-weight: 600;
  width: 40%;
  background: #313131;
  border: 1px solid #414141;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 6px;
}

.form-container .form-submit-btn:hover {
  background-color: #fff;
  border-color: #fff;
}

Recomendado

Um Código por diomankeita001

produto

Efeito de foco de botão animado em CSS

HTML

CSS

JS

Recomendado

Um Código por diomankeita001

produto

Efeito de foco de botão animado em CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS