Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
True Stalker (0)
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1417)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
p4ladya (05.02.2024)
alexander24tomilin (20.12.2023)
Lesnik (13.12.2023)
nikbal888 (05.12.2023)
Fugaz56 (09.08.2023)
  • Страница 1 из 1
  • 1
Красиво анимированные социальные кнопки
Слышу гимн зашитых ртов
StraNNik
Группа: Администратор
Ранг: Опытный
Сообщений: 1417
Карма: 33
Сообщение # 1
Дата: 14.02.2019 в 11:55


Рипал: Бармен
Вставляем в Нижнюю часть сайта или куда душе угодно:

Код
<section class="social">
<div class="socialtab facebook">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M1030.5,3296.99l-61.5-107h123Z" transform="translate(-969 -3190)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.55 32" class="icon facebookicon">
<defs>
<style>.cls-1{fill-rule:evenodd;}</style>
</defs><title>f</title><path class="cls-1" d="M323.68,593.68V608h7V593.75h4.75l1.15-5.94h-5.85v-4.36A1.29,1.29,0,0,1,332,582h3.38v-6h-6.32c-2.18,0-5.4,2.69-5.4,5.54v6.1H320v6Z" transform="translate(-320 -576)"></path></svg></a></div>
<div class="socialtab twitter">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M960.5,3193.01l61.5,107H899Z" transform="translate(-899 -3193)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg class="icon twittericon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"></path></svg></a></div>
<div class="socialtab instagram">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M1030.5,3296.99l-61.5-107h123Z" transform="translate(-969 -3190)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg class="icon instagramicon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>insta</title>
<path d="M345.67,1040a9.67,9.67,0,1,1-19.17-1.86H320V1051a5,5,0,0,0,5,5h22a5,5,0,0,0,5-5v-12.86h-6.51A9.73,9.73,0,0,1,345.67,1040Zm1.32-16H325a5,5,0,0,0-5,5v5.42h8.1a9.67,9.67,0,0,1,15.8,0H352V1029A5,5,0,0,0,347,1024Zm2.45,6.18a0.89,0.89,0,0,1-.89.89h-2.68a0.9,0.9,0,0,1-.89-0.89v-2.68a0.9,0.9,0,0,1,.89-0.89h2.68a0.89,0.89,0,0,1,.89.89v2.68ZM342,1040a6,6,0,1,0-6,6A6,6,0,0,0,342,1040Z" transform="translate(-320 -1024)"></path></svg></a></div>
<div class="socialtab youtube">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M1030.5,3296.99l-61.5-107h123Z" transform="translate(-969 -3190)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg class="icon youtubeicon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22.32">
<defs><style>.cls-1{fill-rule:evenodd;}</style></defs>
<title>youtube</title>
<path class="cls-1" d="M1214.64,395.83c-0.88-1.56-1.83-1.86-3.74-2s-6.73-.18-10.9-0.18h0c-4.18,0-9,.06-10.9.18s-2.86.41-3.74,2-1.36,4.27-1.36,9h0c0,4.74.47,7.44,1.36,9s1.83,1.86,3.74,2,6.73,0.18,10.9.18h0c4.18,0,9-.06,10.9-0.18s2.86-.41,3.74-2,1.36-4.27,1.36-9h0C1216,400.1,1215.53,397.39,1214.64,395.83Zm-17.83,14.88V399l9.09,5.87Z" transform="translate(-1184 -393.68)"></path></svg></a></div>
</section>

CSS:

Код
section.social {
     padding: 120px 0;
     width: 268px;
     height: 300px;
     margin: 0 auto;
     position: relative;
     overflow: visible;
}
section.social .facebook {
     left: 31px;
     top: 0px;
}
section.social .twitter {
     left: 101px;
     top: 4px;
}
section.social .instagram {
     left: 171px;
     top: 0px;
}
section.social .youtube {
     top: 120px;
     left: 101px;
}
section.social .socialtab {
     position: absolute;
     -webkit-transition: -webkit-transform 200ms ease;
     transition: transform 200ms ease;
     width: 63px;
     height: 108px;
     overflow: visible;
     will-change: transform;
}
section.social .socialtab .polygon {
     position: absolute;
     z-index: 1;
     width: 126px;
     left: -31px;
     height: 108px;
     pointer-events: none;
}
section.social .polygon {
     fill: #231828;
     fill-rule: evenodd;
     -webkit-transition: all 200ms ease;
     transition: all 200ms ease;
}
section.social svg {
     overflow: hidden;
}
section.social .socialtab .icon {
     fill: white;
     fill-rule: evenodd;
     position: absolute;
     width: 32px;
     top: 20px;
     left: 16px;
     height: 32px;
     z-index: 2;
}
section.social .twitter .icon {
     top: 60px;
     left: 14px;
}
section.social .facebook:hover {
     -webkit-transform: scale(1.1) translate(-10px, -10px);
     -ms-transform: scale(1.1) translate(-10px, -10px);
     transform: scale(1.1) translate(-10px, -10px);
}
section.social .facebook:hover .polygon {
     fill:#365396
}
section.social .twitter:hover{
     -webkit-transform:scale(1.1) translate(0px, 0px);
     -ms-transform:scale(1.1) translate(0px, 0px);
     transform:scale(1.1) translate(0px, 0px)
}
section.social .twitter:hover .polygon{
     fill:#00a8f0
}
section.social .instagram:hover{
     -webkit-transform:scale(1.1) translate(10px, -10px);
     -ms-transform:scale(1.1) translate(10px, -10px);
     transform:scale(1.1) translate(10px, -10px)
}
section.social .instagram:hover .polygon{
     fill:#386c99
}
section.social .youtube:hover{
     -webkit-transform:scale(1.1) translate(0px, 10px);
     -ms-transform:scale(1.1) translate(0px, 10px);
     transform:scale(1.1) translate(0px, 10px)
}
section.social .youtube:hover .polygon{
     fill:#ff3333
}

  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Microsoft Edge
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-28.05.2024