Задать вопрос
@Bulgar
css

Хочу сделать несколько кнопок такого же стиля что и моя И располагать их так как я захочу?

<html> 
	<head>
	<title>Кнопка</title>
	<link rel="stylesheet" href="css/style.css">
	</head>
    <body>
	<p><a target="_blank" href="http://htmlbook.ru/"</a></p>
	<button  class="btn">Нажать</button>
	</body>
</html>


body {
height: 100vh; 
display: flex; 
justify-content: center;
align-items:center;
background: #d9d9d9;
}	

.btn {
width: 400px; 
height: 80px;
cursor: pointer;
border: none;
background: green;
color: #fff;
text-transform: uppercase;  
font-family: Arial;
font-size: 40px;
letter-spacing:3px;
border-radius:40px;
outline:none;
transition:0.2s;
}

.btn:hover {
transform: translateY(-5px);
box-shadow: 0 7px 0 darkgreen;
color: #d5d5d5
}

.btn:active {
transform: translateY(-2px);
box-shadow: 0 3px 0 darkgreen;

}
  • Вопрос задан
  • 140 просмотров
6 комментариев
Подписаться 1 Простой 6 комментариев
Пригласить эксперта
Ответы на вопрос 1
@srtf1221
Для этого нужно отдельный класс для кнопок (стили кнопок без позиций):
.btn {
  ...
}

А после для каждой отдельной кнопки добавляй классы по типу:
.btn_center {
      margin: 0 auto;
   }
   .btn_left {
      margin-left: 10px;
   }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сборочный чертеж t-flex stm32f7
23 дек. 2024, в 09:59
3000 руб./за проект
Разработать бота для отслеживания неудачных тон транзакций
23 дек. 2024, в 09:55
10000 руб./за проект
Верстка сайта в Tilda
23 дек. 2024, в 09:41
5000 руб./за проект
Ещё заказы