Гость
Обновленные темы Популярные темы Активные пользователи
Проблемс с Симс 4 3 25.05.2020 в 20:19 от 2024end Вопросы // Ответы 11 25.05.2020 в 16:41 от doomgai2016 Флудилка 69 25.05.2020 в 04:41 от Zero Различные иконки для игры или сайта Сталкер 64 20.05.2020 в 16:32 от 2024end Скачать новые черты характера для Sims 4 2 18.05.2020 в 15:44 от 2024end Трудновоспитуемые 1 18.05.2020 в 05:02 от Zero Шаблон для Ucoz на тему CS (testcs) 0 17.05.2020 в 13:10 от 2024end Различная графика для сайтов и игр (interface, backgrou... 12 17.05.2020 в 12:43 от 2024end Wicked Whims - Стриптиз клубы - давайте танцевать 1 13.05.2020 в 19:25 от serjtkachenko Моды от AHarris00Britney для The Sims 4 3 11.05.2020 в 09:51 от 2024end
2024end 3920
Zero 11

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Темно-светлые социальные кнопки rip Бармен
Темно-светлые социальные кнопки rip Бармен
Администраторы
Кол-во постов: 154
Репутация: 759
Регистрация: 28.07.2018
Статус: В сети
 Автор темы | Четверг, 06.06.2019, 20:27 | Сообщение # 1


Рипал: Бармен
Ссылка на скачивание!
Вставляем в Нижнею часть сайта:

Код
<div id="social">
   <div class="container-relative">
      <div class="social-container">
         <a href="#" target="_blank">
         <img class="idle" src="/img/social-fb.png">
         <img class="hover" src="/img/social-fb-hover.png">
         </a>
      </div>
      <div class="social-container">
         <a href="#" target="_blank">
         <img class="idle" src="/img/social-tw.png">
         <img class="hover" src="/img/social-tw-hover.png">
         </a>
      </div>
      <div class="social-container">
         <a href="#" target="_blank">
         <img class="idle" src="/img/social-yt.png">
         <img class="hover" src="/img/social-yt-hover.png">
         </a>
      </div>
   </div>
</div>

CSS:

Код
.container-relative{
     position: relative;
}
.social-container{
     display: block;
     height:25px;
     margin-bottom:15px;
     margin-left:auto;
     position: relative;
     width:25px;
}
.social-container a{
     display: block;
     height:100%;
     overflow:hidden;
     width:100%;
}
.social-container a:before{
     background:white;
     border-radius:50%;
     content:'';
     height:100%;
     left:0;
     position: absolute;
     top:0;
     transform:scale(0);
     transition:250ms transform;
     width:100%;
}
.social-container a:hover:before{
     transform:scale(1);
}
.social-container a:after{
     background:url(/img/social-circle.png)no-repeat center;
     background-size:contain;
     content:'';
     left:0;
     height:100%;
     position: absolute;
     top:0;
     transform:scale(1);
     transition:250ms transform;
     width:100%;
}
.social-container a:hover:after{
     transform:scale(0);
}
.social-container a img{
     width:100%;
}
.social-container a img.idle{
     opacity:1;
}
.social-container a img.hover{
     height:100%;
     left:0;
     position: absolute;
     opacity:0;
     top:0;
     width:100%;
}
.social-container a:hover img.idle{
     opacity:0;
}
.social-container a:hover img.hover{
     opacity:1;
}
#social{
     left:auto;
     margin:2em auto;
     position: relative;
     right:auto;
     top:auto;
     transform:none;
     z-index: 4;
     text-align:center;
}
#social .container-relative{
     display:inline-block;
}
#social .container-relative .social-container{
     margin-right:14px;
}
#social .container-relative:before, #social .container-relative:after{
     content:'';
     height:1px;
     position: absolute;
     width:100px;
}
#social .container-relative:before{
     left:-53%;
     top:calc(50% - 1px);
     background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
     background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
     background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
#social .container-relative:after{
     right:-53%;
     top:calc(50% - 1px);

     background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
     background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
     background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.social-container{
     display: inline-block;
     height:35px;
     margin-bottom:auto;
     margin-left:14px;
     width:35px;
}
.social-container a img.idle{
     opacity:0.8;
}
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Темно-светлые социальные кнопки rip Бармен
  • Страница 1 из 1
  • 1
Поиск: