Как можно использовать кнопки в оформлении страницы?
Кнопки являются неотъемлемой частью любого интерфейса. Их можно создавать как с помощью элемента <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>
в итоге, получаем вот такую кнопку:
Точно таким же образом, вы можете менять стили отображения, которые помогут добавить на ваш сайт разноцветные кнопки.