Создать ответ 
Пара симпатичных кнопок на чистом CSS
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #1
Пара симпатичных кнопок на чистом CSS
Через форму обратной связи пользователь, представившийся как 7Lexus, поделился с ними следующим кодом, позволяющем реализовать на CSS кнопки,
как на картинке ниже:

[Изображение: tid_393_button.png]


(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>
11.10.2016 18:52:56
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru