Анимационная кнопка Telegram

Если кто желает поставить себе такую же кнопку телеграм, как здесь или на сайте feofan.net ее можно впихнуть куда угодно.


Перед закрывающим тегом ставим

<div id="above-content-container" class="async-show">
		<a id="above-content-link" href="https://t.me/feofan_net" target="_blank" rel="nofollow" onclick="ga('send', 'event', 'buttons', 'click', 'above-content-call-to-action');">
			<div id="above-content-button" class="box"><img id="above-content-image" src="http://feofan.net/tg_header.png">Fofan</div>
		</a>
	</div>

В файл css в любое место добавьте
#above-content-button{color:#333;font-size:17px;display:inline-block;border-radius:100px;padding:8px
15px 8px 10px;transition:all 0.3s ease}#above-content-button:hover{color:#555}#above-content-image{margin-right:10px;margin-top:-2px;transition:all 0.5s ease}#above-content-button:hover{color:white;background-color:#62a8db}#above-content-button:hover #above-content-image{transform:rotate(360deg)}
		.box {
		    background: none repeat scroll 0 0 #fff;
		    -moz-border-radius: 2px 2px 2px 2px;
		    -webkit-border-radius: 2px 2px 2px 2px;
		    border-radius: 2px 2px 2px 2px;
		}
		.box {
			box-shadow: 0 .005em .01em 0 rgba(0,0,0,.12),0 2px 10px 0 rgba(0,0,0,.12)!important;
		}
		#above-content-container{
		    text-align:center;
		    padding:6px 0
		}
		#above-content-button{
		    color:#333;
		    font-size:17px;
		    display:inline-block;
		    border-radius:100px;
		    padding:8px 15px 8px 10px
		}
		#above-content-image{
		    margin-right:10px;
		    margin-top:-2px
		}

Если отображает кривенько, покрутите под себя padding и margin это внутренние, внешние отступы
Поделиться:

Нет комментариев