Код IT
← Каталог

UI-паттерны из Uiverse (Galaxy) — Кнопка с «глубиной» (brutalist)

Фрагмент из «UI-паттерны из Uiverse (Galaxy)»: Кнопка с «глубиной» (brutalist).

html lab1155 embed URL статья в энциклопедии
HTML main.html 
<button type="button" class="brutal">Нажми</button>
<style>
.brutal {
  font: 600 1rem/1.2 system-ui, sans-serif;
  padding: 0.75rem 1.5rem;
  border: 3px solid #111;
  border-radius: 4px;
  background: #ffe066;
  box-shadow: 4px 4px 0 #111;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.brutal:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #111;
}
</style>
<button type="button" class="brutal">Нажми</button>
<style>
.brutal {
  font: 600 1rem/1.2 system-ui, sans-serif;
  padding: 0.75rem 1.5rem;
  border: 3px solid #111;
  border-radius: 4px;
  background: #ffe066;
  box-shadow: 4px 4px 0 #111;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.brutal:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #111;
}
</style>