Inter-Net.PRO

Кнопки соцсетей для сайта на чистом CSS

25 апр 2019 23:08 - 26 апр 2019 16:19 #41 от ВарфейСкилл_Ютуб
  Упростим написание задачки))) ! Лунный свет открывает портал программирования когда ты не спишь и не сообщаешь об этом)!
<div class="social-icon-header">
    <ul>
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-vk fa-x1"></i></a></li>
        <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
    </ul>
</div>
копия 
jsfiddle.net/Kolotokon/qL3kcneu/

25 апр 2019 23:10 #42 от ВарфейСкилл_Ютуб

ВарфейСкилл_Ютуб пишет:   Упростим написание задачки))) ! Лунный свет открывает портал программирования когда ты не спишь  !                                                                                                                                
копия 
jsfiddle.net/Kolotokon/qL3kcneu/

  • 404 104
26 апр 2019 16:24 - 26 апр 2019 16:50 #43 от Inter-Net PRO

ВарфейСкилл_Ютуб пишет:   Упростим написание задачки)))

А в чём упрощение? Обернуть в тег ul чтобы потом стили user_agent_stylesheet браузера затирать?

14 июнь 2019 10:37 - 14 июнь 2019 15:46 #44 от Alona Borysova
 Здравствуйте, после перехода по кнопкам они подсвечиваются желтым и становятся не красивые( подскажите как это можно поправить, заранее спасибо
Вложения:

  • 404 104
14 июнь 2019 11:21 #45 от Inter-Net PRO

Alona Borysova пишет: после перехода по кнопкам они подсвечиваются желтым и становятся не красивые

Это у вас в стилях на сайте для ссылок при наведении задан жёлтый цвет.

Попробуйте для свойств проставить !important - это принудительно задаст стили для элемента:
.instagram a:hover {background: #3f729b !important; color: #fff !important;}
.facebook a:hover {background: #3b5998 !important; color: #fff !important;}
.linkedin a:hover {background: #0e76a8 !important; color: #fff !important;}
Это должно помочь.

14 июнь 2019 15:14 #46 от Alona Borysova
Спасибо большое! сделала вот так и помогло)
.social a {
    text-align: center;
    width: 46px;
    height: 46px;
    float: left;
    background: #fff !important;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35), inset 0 0 50px rgba(0,0,0,0.35);
    border-radius: 6px;
    margin: 0 10px 100px 0;
    padding: 3px;
    color: #000 !important;
}

  • 404 104
14 июнь 2019 15:43 - 14 июнь 2019 15:46 #47 от Inter-Net PRO
Да, так правильно.
Я подумал что "подсвечивает" - это когда при наведении курсора мышки на кнопку. Поэтому показал как поправить цвета при наведении.
Оказывается у вас изначально такие цвета присвоились ссылкам на этих кнопках, вы сделали правильно.

Авторизация

Войти через соцсети: