Красивые кнопки для сайта. Часть 4
Кнопки являются неотъемлемой частью любого интерфейса. Их можно создавать как с помощью элемента <button>, так и <a>. Разница в их использовании базируется на семантике HTML.
Кнопка — это элемент интерфейса, при нажатии на который происходит связанное с ним действие или событие. Ссылка же связывает документы между собой, при клике происходит переход на другую страницу (за исключением якорей, которые позволяют перемещаться в пределах одной страницы).
В примерах к уроку используется шрифт Montserrat и иконочный шрифт Linearicons.
Перейти на страницу с примерами
Общие стили для всех примеров:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600&display=swap&subset=cyrillic');
* {
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
}Пример 1.
<button class="button-1">Купить</button>.button-1 {
color: #232323;
background: transparent;
border: 1px solid #232323;
position: relative;
font-size: 14px;
letter-spacing: .3em;
font-family: 'Montserrat', sans-serif;
padding: 17px 34px 17px 39px;
transition: .2s ease-in-out;
cursor: pointer;
}
.button-1:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 100%;
height: 100%;
background: #32D4E2;
z-index: -1;
transition: .25s ease;
transform: translate(0, 0);
}
.button-1:hover:before {
transform: translate(4px, 4px);
}Пример 2.
<a href="" class="button-2"><span>Читать далее</span></a>.button-2 {
text-decoration: none;
position: relative;
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 15px;
font-family: monospace;
font-size: 16px;
color: #232323;
}
.button-2 span {
position: relative;
}
.button-2:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 35px;
height: 100%;
background: #C4F1FF;
transition: .3s ease-in-out;
}
.button-2:hover:before {
width: 100%;
}Пример 3.
<button class="button-3">В корзину</button>.button-3 {
display: inline-flex;
align-items: center;
font-size: 12px;
letter-spacing: .05em;
font-weight: 600;
text-transform: uppercase;
padding: 12px 20px;
font-family: 'Montserrat', sans-serif;
color: #904C6E;
background: white;
border: 1px solid;
cursor: pointer;
transition: .3s linear;
}
.button-3:hover {
background: #F0C7A7;
}
.button-3:after {
content: "\e82e";
font-family: Linearicons-Free;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
margin-left: 30px;
padding-left: 20px;
border-left: 1px solid;
}Пример 4.
<a href="" class="button-4">Узнать больше</a>.button-4 {
text-decoration: none;
display: inline-block;
position: relative;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: white;
font-size: 14px;
background: #383d48;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.button-4:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: 0;
right: 0;
background: linear-gradient(225deg, #BEFDE6 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
transition: .3s;
}
.button-4:hover:before {
width: 20px;
height: 20px;
}Пример 5.
<a href="" class="button-5"><span class="link-content">Читать далее</span></a>.button-5 {
text-decoration: none;
display: inline-block;
position: relative;
padding: 15px 30px;
color: #766AD0;
border: 1px solid #3A374C;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
transition: .3s linear;
}
.button-5:before, .button-5:after, .link-content:before, .link-content:after {
content: "";
position: absolute;
z-index: 1;
width: 15px;
height: 15px;
transition: .3s linear;
}
.button-5:before {
left: -1px;
top: -1px;
border-left: 1px solid #614DFF;
border-top: 1px solid #614DFF;
}
.button-5:after {
bottom: -1px;
right: -1px;
border-bottom: 1px solid #614DFF;
border-right: 1px solid #614DFF;
}
.link-content:after {
right: -1px;
top: -1px;
border-right: 1px solid #614DFF;
border-top: 1px solid #614DFF;
}
.link-content:before {
left: -1px;
bottom: -1px;
border-bottom: 1px solid #614DFF;
border-left: 1px solid #614DFF;
}
.button-5:hover {
color: #614DFF;
border-color: #614DFF;
}Пример 6.
<button class="button-6"><span>Купить</span></button>.button-6 {
background: transparent;
border-width: 0;
position: relative;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
transition: .3s;
}
.button-6 span {
display: block;
position: relative;
z-index: 3;
background: #41294a;
color: white;
padding: 0 30px;
line-height: 40px;
}
.button-6:before {
content: "";
position: absolute;
width: calc(100% + 5px);
height: calc(100% + 5px);
left: -5px;
top: -5px;
background: #ff2c54;
z-index: 1;
transition: .4s ease-out;
}
.button-6:after {
content: "";
position: absolute;
width: calc(100% + 5px);
height: calc(100% + 5px);
right: -5px;
bottom: -5px;
background: #41ebdf;
transition: .4s ease-out .1s;
}
.button-6:hover:before {
transform: translate(5px, 5px);
}
.button-6:hover:after {
transform: translate(-5px, -5px);
}Пример 7.
<a class="button-7" href=""><span>Читать далее</span></a>.button-7 {
text-decoration: none;
display: inline-flex;
align-items: center;
padding: 15px;
color: #383d48;
}
.button-7 span {
display: block;
overflow: hidden;
max-width: 0;
opacity: 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 1px;
line-height: 1;
transition: .4s ease;
}
.button-7:after {
content: '\e886';
font-family: Linearicons-Free;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 22px;
}
.button-7:hover span {
max-width: 150px;
opacity: 1;
margin-right: 6px;
}
