I'm trying to add social buttons to my website with simple HTML and a few lines of CSS.

Here's what I came up with:

<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 can't load Dashicons, so icons are not visible, but here's how it looks on my site: https://i.imgur.com/5XHpWkM.jpg).

I have one question and one problem.

1. How can I add links to these buttons without visible anchors? I want to be able to click on a Facebook or Twitter icon and be redirected to my site's fan page.

2. I need to add cursor: pointer to pseudo-elements in my code, but I have no idea how. It works outside of pseudo-elements (Dashicons and text in this scenario), but not on the pseudo-elements themselves. Once again, JsFiddle can't load Dashicons so here it works fine, but not on my site.

Does anyone have any ideas? Thanks in advance!

CodePudding user response：

Simply add your a tag around the buttons with your fan page's URL linked to each respective button. This link is really helpful when referring to social media icons or buttons. Using the bootstrap class btn-facebook in this case is the way to do it. There are also ways to do it inline also such as using the #3B5998 code.

.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>