Кнопки обратной связи для сайта на CSS
 | |
| На любом сайте есть функция обратной связи, что вы можете поставить 3 кнопки на шрифтовых иконок, которые в правом верхнем углу будут. Они разноцветные и идут под красным, синим и желтым оттенком, но здесь при помощи CSS вы можете сменить. Также вы можете поставить как одну или 2 кнопки и под разный функционал. Так как иконки шрифтовые меняются в ручную, и какую вам нужно. то все меняется быстро. Так как они стоят под ссылкой, то при клике пользователи или гости переходят на ту страницу или информацию, что вы сами прописали. Скрипт простой сам по себе и по установке, вам нужно вверх сайта его поставить и установить в 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, за предоставленный материал. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
