Как можно использовать кнопки в оформлении страницы?

Owebs

27 декабря 2021

Время чтения: 3 минуты

Оглавление

Развернуть Свернуть

Кнопки являются неотъемлемой частью любого интерфейса. Их можно создавать как с помощью элемента <button>, так и <a>. Разница в их использовании базируется на семантике HTML.

Кнопка — это элемент интерфейса, при нажатии на который происходит связанное с ним действие или событие. Ссылка же связывает документы между собой, при клике происходит переход на другую страницу (за исключением якорей, которые позволяют перемещаться в пределах одной страницы).

В примерах к уроку используется шрифт Helvetica.

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

HTML:
<button type="button" class="btn">Нажать на кнопку</button>
CSS:
.btn {
position:relative;
display: flex;
justify-content:center;
align-items: center;
width: 180px;
min-width: 180px;
min-height: 50px;
border: 1px solid rgb(79, 197, 79);
background-color: #fff;
font-family: Helvetica, sans-serif;
font-size: 14px;
color: rgb(79, 197, 79);
outline:none;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s;
overflow: hidden;
z-index: 2;
}

.btn::before {
content: '';
position: absolute;
top:0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgb(79, 197, 79);
transition: left 0.3s;
z-index: -1;
}

.btn:hover {
color: #fff;
}

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

После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка:

Также, можем переопределить некоторые из стилей данной кнопки, вынеся их в отдельный класс и тем самым получить ту же анимированную кнопку, но, уже в других цветах.
для этого придумаем название класса, которым мы будем менять стили. Например: btnWhite
и теперь пишем следующий CSS-код:

.btnWhite {
border: 1px solid #fff;
background-color: transparent;
color: #fff;
}
.btnWhite::before{
background-color:#fff;
}
.btnWhite:hover {
color: #000;
}

Добавляем к нашей кнопке класс btnWhite:

<button type="button" class="btn btnWhite">Нажать на кнопку</button>
в итоге, получаем вот такую кнопку:

Точно таким же образом, вы можете менять стили отображения, которые помогут добавить на ваш сайт разноцветные кнопки.