I have set up sharing buttons on my website, but they appear distorted on Firefox and Opera browsers. Interestingly, they render perfectly on Chrome and even Internet Explorer. Here is a preview of how it currently looks:
If you are using Firefox or Opera, you can view the live version here: gdgtarena.com/2014/09/27/smartthings/
Below is the CSS styling used:
/*
* Custom CSS for Sharing Buttons
*/
@media all {
.si-button{
position: relative;
display: inline-block;
overflow: hidden;
padding: 4px 12px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
font-family: 'Roboto Condensed',sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 24px;
color: #fff;
background-color: #2878c8;
cursor: pointer;
user-select: none;
transition: all .4s ease-in-out;
text-decoration: none !important;
}
(more CSS rules existing here...)
And here is a snippet of the HTML (including some PHP code):
(HTML and PHP code snippet included here)