Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
OpenXRay 1.6.02+ (1)
Сталкерские иконки группи... (0)
Темно-светлые социальные ... (0)
Светящаяся кнопка rip Бар... (0)
Cмайл вашего настроения д... (0)
У костра (191)
Анекдоты (145)
Города (94)
Обновление сайта (67)
Создание НПС (63)
StraNNik (1321)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
sej963821 (14.09.2019)
danilov380 (13.09.2019)
gusarowdemon (05.09.2019)
belarusgames7 (26.08.2019)
kapitonovleon2003 (24.08.2019)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Красиво анимированные социальные кнопки (Rip by Бармен)
Красиво анимированные социальные кнопки
StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1321
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Четверг, 14.02.2019, 11:55/ Сообщение №: 1


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

Код
<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
}



Тихо на улице, пусто в квартире..Спасибо реактору №4

Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Красиво анимированные социальные кнопки (Rip by Бармен)
  • Страница 1 из 1
  • 1
Поиск:

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