Generator przycisków CSS

Podgląd



Skopiowano
CSS
.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  color: #FFFFFF;
  background-color: #2563EB;;
  border: 0;;
}

.btn-demo:hover {
  filter: brightness(105%);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.25);
}

.btn-demo:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.btn-demo:disabled, .btn-demo.disabled {
  opacity: .6; pointer-events: none;
}
HTML
<button class=\"btn-demo\">Przycisk</button>