» »

Кнопки для сайта с эффектом стрелки


Кнопки для сайта с эффектом стрелки

Очень простые и удобные по своему стилю кнопки разной гаммой цвета. Где присутствует эффект стрелки, которая при наведение появиться. Идет четыре фактуры цвета, где просто по умолчанию они представлены, так как под каждую кнопку стиль прописан и вы сможете изменить его на свою гамму и чтоб на интернет ресурс отлично подошла. Про тематику пару слов, то как можно заметить, то здесь они могут подойти на любую, что игровая площадка, что собственный блог и возможность поставить на главную страницу.

Одни из многих, где стилистика не изменяется при наведение, а только появляется стрелка и немного продвигает написанный текст. Это можно сделать как функцию "Читать дальше" или просто на софт ресурсе "Скачать" вообщем много где можно применить их. Для начало прописываем стили, и если нужно берем тот, который вам нужен, так как безусловно все разные ставить нелепо будет. И большой плюс, это простота их, как настраивать, что начинающий веб мастер может сделать и где то может стандартный дизайн, который корректируется.

И когда только в 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>


Синяя кнопка

Синяя кнопка на CSS

Код
<button class="buttonuon blue"><span>Читать далее zornet.ru</span><i class="ion-android-arrow-forward"></i></button>

Черная кнопка

Черная кнопка CSS для сайта

Код
<button class="buttonuon"><span>Принять на сайт zornet.ru</span><i class="ion-android-arrow-forward"></i></button>


PS - чтоб понять как они работают, то предоставлена демонстрация на этот материал. Где четко можно посмотреть эффект, который безусловно не обычный и для кого то уникально смотреться.

Источник: uon.ucoz.com
23.02.2017 Просмотров: 533 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Сопрано
Сопрано 23.02.2017 02:031
0
Согласен, в описание верно подмечено, что многие привыкли к эффекту на смену цвета, здесь по другому, мне понравилось.
FeStemBer
FeStemBer 23.02.2017 02:092
0
Это что если мне нужен один цвет, все стили ставить, но вот видно, что вверх стилей обязательно ставить, но здесь идет на 4 кнопки, и на одну самому видать нужно вытаскивать.
Сафрон
Сафрон 23.02.2017 02:233
0
Кнопки стандартные, и не скажу что эффект новый, но на сайте мне не проходилось такого замечать.
tsakonter
tsakonter 23.02.2017 03:124
0
Да они все стандартные, но почему то их много, так как функций эффекта различные.
ucozmental
ucozmental 23.02.2017 03:335
0
Кнопочки просто блеск и стили не такие большие в CSS в любом случай поместятся.
avatar