Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Оригинальная кнопка на сайте на CSS стилях
Оригинальная кнопка на сайте на CSS стилях
ДимДимыч
Дата: Понедельник, 02.01.2017, 13:27 | Сообщение # 1
Vip
Сообщений:88
Награды: 6


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

Сразу хочу сказать то что не я её автор, то есть не я её делал, она просто была замечена мною на одном uCozovskom сайте и я не мог её упустить из глаз.



вот сама ссылка этой кнопки.

Код
<a href="ваша ссылка" class="to_play_2" target="_blank" rel="nofollow">Кнопка</a>


Её мы ставим естественно в то место на сайте где вы считаете ей самое место. Где написано Кнопка там пишем своё название кнопки, а где написано ваша ссылка там укажите адрес сайта или ссылку куда нужно переходить пользователю когда он нажмёт на эту чудо кнопку.

Теперь в стили вашего сайта добавьте вот этот кусочек стилей кнопки.

Код
.to_play_2 {
display: inline-block;
padding: 7px 30px;
background-color: #B03C3C;
color: #ffffff;
position: relative;
font-family: Play;
float: right;
}

.to_play_2:before {
background-color: rgba(255,255,255,0.3);
content: "";
width: 80px;
height: 40px;
position: absolute;
left: -40px;
top: -10px;
transform: rotate(-45deg);
}

.to_play_2:hover {
background-color: #658539;
color: #ffffff;
}


На этом всё!
Прикрепления: 4518842.jpg(16Kb)
Kosten
Дата: Понедельник, 02.01.2017, 14:09 | Сообщение # 2
Администраторы
Сообщений:13500
Награды: 47


Как понимаю с красивым эффектом должна идти.
ДимДимыч
Дата: Понедельник, 02.01.2017, 14:10 | Сообщение # 3
Vip
Сообщений:88
Награды: 6


Kosten, Там уголок прикольно смотрится, мне он понравился и кнопка с ним обретает другой вид, раньше видел на подобие но всё сделано картинкой а тут всё стилями.
Kosten
Дата: Понедельник, 02.01.2017, 14:13 | Сообщение # 4
Администраторы
Сообщений:13500
Награды: 47


И стили идут небольшие, с эффектом основном такой багаж стилей идет.
Форум про uCoz » Всё для web-мастера » Web мастеру » Оригинальная кнопка на сайте на CSS стилях
Страница 1 из 11
Поиск: