Блог

Я пытаюсь добавить социальные кнопки на свой сайт с помощью простого HTML и нескольких строк CSS.

Вот что я придумал:

 <button class="facebook-btn"><span class="dashicons dashicons-facebook-alt"></span></button>
<button class="twitter-btn"><span class="dashicons dashicons-twitter"  ></span></button>
 

 .facebook-btn, .twitter-btn{
    height:105px;
    width:50% !important;
    float:left !important;
    cursor: pointer !important;
}

.facebook-btn{
    background: #405992;
}

.twitter-btn{
    background: #4099ff;
}

.custom-html-widget .facebook-btn span, .twitter-btn span{
    font-size:48px;
    position:relative;
    color: #fff;
    display:block;
    width:100%;
    top:-27px;
}

.custom-html-widget .facebook-btn span:after{
    font-family: Barlow;
    position: relative;
    top:7px !important;
    content: "Polub";
    font-size:18px !important;
    width:100%;
    display:block;
}

.custom-html-widget .twitter-btn span:after{
    font-family: Barlow;
    position: relative;
    top:7px !important;
    content: "Zaobserwuj";
    font-size:18px !important;
    width:100%;
    display:block;
}

.facebook-btn:hover, .twitter-btn:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity = 80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
    opacity: .8;
    transition: all .2s ease-in-out;
}
 

JSFiddle: https://jsfiddle.net/0t17mv5x/ (JSFiddle не может загружать значки, поэтому значки не видны, но вот как это выглядит на моем сайте: https://i.imgur.com/5XHpWkM.jpg).

У меня есть один вопрос и одна проблема.

1. Как я могу добавлять ссылки на эти кнопки без видимых якорей? Я хочу иметь возможность нажать на значок Facebook или Twitter и быть перенаправленным на фан-страницу моего сайта.
2. Мне нужно добавить курсор: указатель на псевдоэлементы в моем коде, но я понятия не имею, как это сделать. Он работает вне псевдоэлементов (в этом сценарии-символы и текст), но не над самими псевдоэлементами. Еще раз, JsFiddle не может загружать дашиконы, поэтому здесь это работает нормально, но не на моем сайте.

У кого-нибудь есть какие-нибудь идеи? Заранее спасибо!

Просто добавьте свои a tag кнопки вокруг, указав URL-адрес вашей фан-страницы, связанный с каждой соответствующей кнопкой. Эта ссылка действительно полезна при обращении к значкам или кнопкам социальных сетей. Использование класса начальной btn-facebook загрузки в данном случае-это способ сделать это. Есть также способы сделать это встроенным, например, с помощью #3B5998 кода.

 .facebook-btn, .twitter-btn{
    height:105px;
    width:50% !important;
    float:left !important;
    cursor: pointer !important;
}

.facebook-btn{
    background: #405992;
}

.twitter-btn{
    background: #4099ff;
}

.custom-html-widget .facebook-btn span, .twitter-btn span{
    font-size:48px;
    position:relative;
    color: #fff;
    display:block;
    width:100%;
    top:-27px;
}

.custom-html-widget .facebook-btn span:after{
    font-family: Barlow;
    position: relative;
    top:7px !important;
    content: "Polub";
    font-size:18px !important;
    width:100%;
    display:block;
}

.custom-html-widget .twitter-btn span:after{
    font-family: Barlow;
    position: relative;
    top:7px !important;
    content: "Zaobserwuj";
    font-size:18px !important;
    width:100%;
    display:block;
}

.facebook-btn:hover, .twitter-btn:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity = 80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
    opacity: .8;
    transition: all .2s ease-in-out;
    cursor: pointer; /* added to hover effect, seemed to be working fine in fiddle */
} 

 <a href="facebookURL.com"><button class="facebook-btn"><span class="dashicons dashicons-facebook-alt"></span></button></a>
<a href="twitterURL.com"><button class="twitter-btn"><span class="dashicons dashicons-twitter"></span></button></a>