Добрый день. Сегодня рассмотрим как просто сделать красивую кнопку на HTML и добавить к ней стили.
Итак, приступим...
Для начала, как всегда, создаем файл test.html в любом месте нашего ПК.
Открываем наш файл test.html и вставляем строку подключения нашего файла со стилями:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Далее мы прописываем нашу кнопку:
<body>
<button class="custom-btn btn-2">Кнопка</button>
</body>
Но без стилей наша кнопка выглядит очень скучно, исправим это.
Открываем наш файл styles.css и в нем прописываем такой текст:
.btn {
background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
border: none;
}
background: linear-gradient - задает линейный градиентный фон кнопки.
border: none; - удаляет рамку кнопки.
Далее вставляем еще код:
.custom-btn {
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}
Тут мы задаем высоту, ширину кнопки, цвет текста, радиус углов , внутренние отступы, шрифты, тень и т.д.
И , наконец, немного добавим анимации при наведении на кнопку:
.btn:hover {
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .5),
inset -4px -4px 6px 0 rgba(255,255,255,.2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
Будет меняться тень нашей кнопки.
Ничего сложного, все стили можно будет доработать под себя.