» »

Кнопки обратной связи для сайта на CSS

Кнопки обратной связи для сайта на CSS

На любом сайте есть функция обратной связи, что вы можете поставить 3 кнопки на шрифтовых иконок, которые в правом верхнем углу будут. Они разноцветные и идут под красным, синим и желтым оттенком, но здесь при помощи CSS вы можете сменить. Также вы можете поставить как одну или 2 кнопки и под разный функционал. Так как иконки шрифтовые меняются в ручную, и какую вам нужно. то все меняется быстро. Так как они стоят под ссылкой, то при клике пользователи или гости переходят на ту страницу или информацию, что вы сами прописали.

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

Так реально по размеру они смотрятся.

Кнопки css

Теперь вид с темтового сайта, где проверялся материал на работоспособность.

Цветные кнопки CSS для сайта

Приступаем к установке:

Что первое нужно сделать, то поставить шрифтовые иконки, а точнее стиль на них.

Его можно в низ сайта или вверх, чтоб на всех страницах работал.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Этот код разместить вверх сайта в самый его потолок:

Код
<div class="c_i-block anim-effect-block flipInX animated" style="visibility: visible; animation-name: flipInX;"><a href="http://zornet.ru/load/145">  
  <div class="ib bi1"><i class="fa fa-phone"></i></div></a>  
  </div>  
  <div class="c_i-block anim-effect-block flipInX animated" style="visibility: visible; animation-name: flipInX;"><a href="http://zornet.ru/load/142">  
  <div class="ib bi2"><i class="fa fa-envelope"></i></div></a>  
  </div>  
  <div class="c_i-block anim-effect-block flipInX animated" style="visibility: visible; animation-name: flipInX;"><a href="http://zornet.ru/load/81">  
  <div class="ib bi4"><i class="fa fa-map-marker"></i></div></a>
  </div>

CSS:

Код
.c_i-block .ib{  
  width:50px;  
  height:50px;  
  float:left;  
  color:#fff;  
  text-align:center;  
  font-size:18px;  
  line-height:50px;  
  margin-right:10px;  
}  
.bi1 {  
  background: #FE5656;  
}  
.bi2 {  
  background: #FBCD00;  
}  

.bi4 {  
  background: #00A3BB;  
}

Спасибо большое пользователю Dagada, за предоставленный материал.
17.08.2017 Просмотров: 409 Комментарий: (3)

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

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

Комментарий: 3
Critic©
Critic© 17.08.2017 18:241
0
Не очень они красиво сделаны с углами, здесь они намного красивее будут круглыми. вы это не находите.
Kosten
Kosten 17.08.2017 18:462
0
Когда проверял почему то не догадался их закруглить. что согласен круглые намного лучше должны смотреться, так как сейчас редко дизайн с углами можно найти, если что в стили ставим этот стиль border-radius: 100px; - что кнопки закруглит.
Critic©
Critic© 17.08.2017 23:543
0
Для чего делать 100 процентов чтоб закруглить, вполне хватит и 50% и будет круг.
avatar