I recently created some social media buttons with share counters, but I'm facing an issue where the counter data appears inside the buttons rather than on top of them. Has anyone encountered this problem before?
Is there a way to display the number of shares on top of the button instead of inside it? If so, how can this be achieved?
Despite using CSS properties like
float: leftandtext-align: left, the text inside each social button remains centered. Does anyone know why this might be happening?
You may find my code snippet on JSFiddle for reference... Link to Fiddle
Below is my HTML markup:
<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Like</div><span>0</span>
</a>
<a class="post-share facebook entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Facebook Share</div><span>0</span>
</a>
<a class="post-share twitter entShare" target="entsharewindow" href="#">
<div class="social-buttons-text">Twitter</div><span>0</span>
</a>
This is my CSS styles:
a.post-share {
display: block;
width: 74px;
height: 34px;
float: left;
margin: 10px 0px 0px 0px;
background: #3e599a url(sidebar-share.png) no-repeat 0 0;
text-decoration:none;
width: 110px;
text-indent: 50px;
font: 15px/46px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #FFFFFF;
}
a.post-share:hover {
opacity: 0.8;
text-decoration: none;
cursor: pointer;
}
a.post-share span {
width: 22px;
height: 18px;
padding: 3px;
display: block;
float:right;
background-color:#080563;
color: #FFFFFF;
font-style:bold;
vertical-align: middle;
font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align:center;
text-indent: 0;
}
a.post-share.facebook {
background-color: #3B5998;
background-image: url('/images/social-icons/facebook-32.png');
margin-right: 10px;
}
.social-buttons-text {
font-size:4px;
color:#FFFFFF;
float:left;
margin:0px;
padding:0px;
text-align:left;
}