光标:指针不工作的伪元素+如何添加链接到一个HTML按钮图标?

Question

我正在尝试用简单的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不能加载Dashicons，所以图标不可见，但这是它在我的网站上的样子:https://i.stack.imgur.com/iO7Qi.jpg)。

我有一个问题和一个难题。

1. 我如何添加这些按钮不可见的锚的链接?我希望能够点击一个Facebook或Twitter图标，并被重定向到我的网站的粉丝页面。

2. 我需要添加光标:指针到伪元素在我的代码，但我不知道如何。它可以在伪元素之外工作(在这个场景中是Dashicons和text)，但不能在伪元素本身上工作。再一次，JsFiddle不能加载Dashicons，所以在这里它工作得很好，但不是在我的网站。

谁有什么想法?提前感谢!

Answer 1

只需在按钮周围添加您的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>