Через форму обратной связи пользователь, представившийся как 7Lexus, поделился с ними следующим кодом, позволяющем реализовать на CSS кнопки,
как на картинке ниже:
(05.10.2016 14:43:03)7Lexus писал(а):Знаю, что вы сторонник всяких фишек без использования jQuery+JS.
Предлагаю для публикации в разделе "Скрипты" несложные такие кнопки, которые подойдут, как для организации навигации в переходах, так и для визуального отображения, например, тегов для статей, новостей.
Код:
<style>
a.left, a.right {
display: block;
float: left;
text-decoration: none;
position: relative;
color: #343837;
background: #F5F3E7;
margin-right: 20px;
line-height: 24px;
padding: 0 10px;
border-top: 1px solid;
border-bottom: 1px solid;
transition: .2s linear;
}
a.left:hover, a.right:hover {
border-top: 1px solid #4FC2C1;
border-bottom: 1px solid #4FC2C1;
}
a.left:hover:before , a.right:hover:before {
border: 1px solid #4FC2C1;
}
a.left:before, a.right:before {
content: "";
position: absolute;
background: #F5F3E7;
width: 16px;
height: 16px;
top: 3px;
border: 1px solid;
transform: rotate(45deg);
z-index: -1;
transition: .2s linear;
}
a.left:after, a.right:after {
content:"";
position: absolute;
width: 0;
height: 0;
top: 6px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
a.left:before {
left: -9px;
}
a.right:before {
right: -9px;
}
a.left:after {
left: 0;
border-right: 6px solid #4FC2C1;
}
a.right:after {
right: 0;
border-left: 6px solid #4FC2C1;
}
.left {
margin-left: 30px;
padding-left: 15px;
border-right: 1px solid;
}
.right {
padding-right: 15px;
border-left: 1px solid;
}
.left:hover {
border-right: 1px solid #4FC2C1;
}
.right:hover {
border-left: 1px solid #4FC2C1;
}
</style>
<a href="#" class="left">Кнопка возврата</a>
<a href="#" class="right">Кнопка перехода</a>