Кнопки для сайта с эффектом стрелки
 | |
| Очень простые и удобные по своему стилю кнопки разной гаммой цвета. Где присутствует эффект стрелки, которая при наведение появиться. Идет четыре фактуры цвета, где просто по умолчанию они представлены, так как под каждую кнопку стиль прописан и вы сможете изменить его на свою гамму и чтоб на интернет ресурс отлично подошла. Про тематику пару слов, то как можно заметить, то здесь они могут подойти на любую, что игровая площадка, что собственный блог и возможность поставить на главную страницу. Одни из многих, где стилистика не изменяется при наведение, а только появляется стрелка и немного продвигает написанный текст. Это можно сделать как функцию "Читать дальше" или просто на софт ресурсе "Скачать" вообщем много где можно применить их. Для начало прописываем стили, и если нужно берем тот, который вам нужен, так как безусловно все разные ставить нелепо будет. И большой плюс, это простота их, как настраивать, что начинающий веб мастер может сделать и где то может стандартный дизайн, который корректируется. И когда только в CSS пропишите, то вам только останется код поставить на саму кнопку, там где вы хотите ее видеть. Здесь представлено все 4 кода, чтоб можно было сразу скопировать и установить и потом уже по месту редактировать, это сам дизайн и цвет основной, который должен вписаться на портале. Приступаем к установке: CSS: Код @import url(https://fonts.googleapis.com/css?family=Raleway:400,500); @import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); button.buttonuon { font-family: 'Raleway', Arial, sans-serif; border: none; background-color: #000000; border-radius: 5px; color: #ffffff; cursor: pointer; padding: 10px 30px; display: inline-block; margin: 15px 30px; text-transform: uppercase; line-height: 1.5em; font-weight: 400; font-size: 1em; outline: none; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } button.buttonuon span { display: inline-block; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0.8; } button.buttonuon i { font-size: 21px; left: 22px; position: absolute; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } button.buttonuon:hover span, button.buttonuon.hover span { -webkit-transform: translate3d(10px, 0px, 0px); transform: translate3d(10px, 0px, 0px); opacity: 1; } button.buttonuon:hover i, button.buttonuon.hover i { opacity: 0.8; } button.buttonuon:active span { -webkit-transform: translate3d(14px, 0px, 0px); transform: translate3d(14px, 0px, 0px); } button.buttonuon:active i { left: 18px; } button.buttonuon.blue { background-color: #20638f; } button.buttonuon.red { background-color: #962d22; } button.buttonuon.yellow { background-color: #b06f09; } Теперь остается выбрать кнопку и вы смысл написанного сами напишите. Что можно их ставить на всем ресурсе и ставить те знаки, которые нужны с применением Font Awesome - шрифтовые иконки, который также будет виден. Желтая кнопка  Код <button class="buttonuon yellow"><span>Подписаться на zornet.ru</span><i class="ion-android-arrow-forward"></i></button> Красная кнопка  Код <button class="buttonuon red"><span>Добавить на zornet.ru</span><i class="ion-android-arrow-forward"></i></button> Синяя кнопка  Код <button class="buttonuon blue"><span>Читать далее zornet.ru</span><i class="ion-android-arrow-forward"></i></button> Черная кнопка  Код <button class="buttonuon"><span>Принять на сайт zornet.ru</span><i class="ion-android-arrow-forward"></i></button> PS - чтоб понять как они работают, то предоставлена демонстрация на этот материал. Где четко можно посмотреть эффект, который безусловно не обычный и для кого то уникально смотреться. Источник: uon.ucoz.com | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
