🔲 Outline Button

Кнопка с обводкой. Второстепенное действие на странице.

Синий outline

HTML

<button class="btn btn-outline-blue">Outline</button>

CSS

.btn-outline-blue {
  background: transparent;
  color: #4facfe;
  border: 2px solid #4facfe;
}

.btn-outline-blue:hover {
  background: #4facfe;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 172, 254, 0.3);
}

Зелёный outline

HTML

<button class="btn btn-outline-green">Успех</button>

CSS

.btn-outline-green {
  background: transparent;
  color: #43e97b;
  border: 2px solid #43e97b;
}

.btn-outline-green:hover {
  background: #43e97b;
  color: #0d1117;
  transform: translateY(-2px);
}

Красный outline

HTML

<button class="btn btn-outline-red">Удалить</button>

CSS

.btn-outline-red {
  background: transparent;
  color: #ef3b53;
  border: 2px solid #ef3b53;
}

.btn-outline-red:hover {
  background: #ef3b53;
  color: white;
  transform: translateY(-2px);
}