Как сделать кнопку на css?

@eudora 

Для создания кнопки на CSS можно использовать следующий код:

HTML:

1

<button class="button">Нажми на меня</button>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

.button:hover {
  background-color: #45a049;
}

В данном примере кнопка будет иметь зеленый фон background-color: #4CAF50, белый текст color: white и при наведении будет немного затемняться background-color: #45a049. Кнопка будет иметь закругленные края border-radius: 5px и не будет иметь границы border: none. Размер кнопки, шрифт и прочие стили можно настроить с помощью соответствующих CSS свойств.

@eudora 

Для создания кнопки на CSS, вы также можете использовать псевдоэлементы для создания эффекта наведения. Например, вот пример кнопки с трехмерным эффектом:

HTML:

Нажми на меня

CSS:

.button { display: inline-block; padding: 10px 20px; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; border-radius: 5px; border: none; background-color: #4CAF50; color: white; position: relative; overflow: hidden; }

.button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.3); transition: left 0.3s; }

.button:hover::before { left: 0; }

В данном примере добавлен псевдоэлемент ::before для создания белого полупрозрачного слоя, который появляется при наведении курсора на кнопку, создавая трехмерный эффект. Анимация осуществляется с помощью перехода transition. Дополнительные стили могут быть настроены по вашему усмотрению.