5 дизайнов темных кнопок с использованием HTML и CSS

Здесь представлены пять дизайнов темных кнопок с кодом с использованием HTML и CSS:

1. Сплошная темная кнопка с эффектом наведения:

<button class = "solid-dark-button">Click Here!</button>

<style>
.solid-dark-button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.solid-dark-button:hover {
  background-color: #444;
}
</style>

2. Очерченная темная кнопка с эффектом наведения:

<button class = "outlined-dark-button">Click Here!</button>

<style>
.outlined-dark-button {
  background-color: transparent;
  color: #333;
  border: 2px solid #333;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.outlined-dark-button:hover {
  background-color: #333;
  color: #fff;
}
</style>

3. Градиентная темная кнопка с эффектом наведения:

<button class = "gradient-dark-button">Click Here!</button>

<style>
.gradient-dark-button {
  background: linear-gradient(to bottom, #444, #222);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.gradient-dark-button:hover {
  background: linear-gradient(to bottom, #222, #000);
}
</style>

4. Закругленная темная кнопка с иконкой:

<button class = "rounded-dark-button">Click Here!</button>

<style>
.rounded-dark-button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
}
</style>

5. Темная кнопка с рамкой и тенью:

<button class = "bordered-shadow-dark-button">Click Here!</button>

<style>
.bordered-shadow-dark-button {
  background-color: #222;
  color: #fff;
  border: 2px solid #333;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 2px 2px 2px #000;
}

.bordered-shadow-dark-button:hover {
  background-color: #333;
  color: #fff;
}
</style>

Спасибо, что нашли время прочитать этот блог об основах дизайна кнопок с использованием основных html и css. Я надеюсь, что вы нашли представленную здесь информацию полезной и познавательной.