• Resolved Adam Ainsworth

    (@adamainsworth)


    I needed to resize the buttons, but found they were hardcoded to 45px square. I refactored the CSS to use percentages, and thought I’d post the code here for anyone else who wishes to use it. No you just need to change lines 20 and 31 if you want to resize.

    @CHARSET "UTF-8";
    .social-sharing{width: 100%; clear: both;}
    .social-sharing span{display: inline-block;font-size: 110%;}
    .social-sharing span.top, .social-sharing span.bottom {width:100%;} .social-sharing span.right {display: inline;}
    a.button-facebook,a.button-googleplus,a.button-twitter,a.button-linkedin,a.button-pinterest,a.button-xing{color: #fff;text-decoration:none;font-size: 16px;font-weight:normal; margin:1% 1% 1% 0;padding:5px 1%;padding:.5rem 1%;text-align:center;display: inline-block;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);border:0px;}
    a.button-facebook {background-color: #2b4170;background: -moz-linear-gradient(top, #3b5998, #2b4170);background: -ms-linear-gradient(top, #3b5998, #2b4170);background: -webkit-linear-gradient(top, #3b5998, #2b4170);text-shadow: 0 -1px -1px #1f2f52;}
    a.button-facebook:hover {background-color: #3b5998;background: -moz-linear-gradient(top, #2b4170, #3b5998);background: -ms-linear-gradient(top, #2b4170, #3b5998);background: -webkit-linear-gradient(top, #2b4170, #3b5998);color:#fff;}
    a.button-googleplus { background-color: #c33219;background: -moz-linear-gradient(top, #e64522, #c33219);background: -ms-linear-gradient(top, #e64522, #c33219);background: -webkit-linear-gradient(top, #e64522, #c33219);text-shadow: 0 -1px -1px #972412;}
    a.button-googleplus:hover {background-color: #e64522;background: -moz-linear-gradient(top, #c33219, #e64522);background: -ms-linear-gradient(top, #c33219, #e64522);background: -webkit-linear-gradient(top, #c33219, #e64522); color:#fff;}
    a.button-twitter {background-color: #0081ce;background: -moz-linear-gradient(top, #00aced, #0081ce);background: -ms-linear-gradient(top, #00aced, #0081ce);background: -webkit-linear-gradient(top, #00aced, #0081ce);text-shadow: 0 -1px -1px #005ea3;}
    a.button-twitter:hover {background-color: #00aced;background: -moz-linear-gradient(top, #0081ce, #00aced);background: -ms-linear-gradient(top, #0081ce, #00aced);background: -webkit-linear-gradient(top, #0081ce, #00aced);color:#fff;}
    a.button-linkedin {background-color: #0073b2;background: -moz-linear-gradient(top, #009cda, #0073b2);background:-ms-linear-gradient(top, #009cda, #0073b2);background: -webkit-linear-gradient(top, #009cda, #0073b2);text-shadow: 0 -1px -1px #005486;}
    a.button-linkedin:hover{background-color: #009cda;background: -moz-linear-gradient(top, #0073b2, #009cda);background: -ms-linear-gradient(top, #0073b2, #009cda);background: -webkit-linear-gradient(top, #0073b2, #009cda);color:#fff;}
    a.button-pinterest {background-color: #a0171c;background: -moz-linear-gradient(top, #cb2027, #a0171c);background: -ms-linear-gradient(top, #cb2027, #a0171c);background: -webkit-linear-gradient(top, #cb2027, #a0171c);text-shadow: 0 -1px -1px #761114;}
    a.button-pinterest:hover{background-color: #cb2027; background: -moz-linear-gradient(top, #a0171c, #cb2027);background: -ms-linear-gradient(top, #a0171c, #cb2027);background: -webkit-linear-gradient(top, #a0171c, #cb2027);color:#fff;}
    a.button-xing{background-color: #135353; background: -moz-linear-gradient(top, #006464, #135353);background: -ms-linear-gradient(top, #006464, #135353);background: -webkit-linear-gradient(top, #006464, #135353);text-shadow: 0 -1px -1px #1e7677;}
    a.button-xing:hover {background-color: #006464;background: -moz-linear-gradient(top, #135353, #006464);background: -ms-linear-gradient(top, #135353, #006464);background: -webkit-linear-gradient(top, #135353, #006464);color:#fff;}
    
    .ss-social-sharing a{text-indent: -99999px;}
    a.ss-button-facebook, a.ss-button-googleplus, a.ss-button-twitter, a.ss-button-linkedin,a.ss-button-pinterest,a.ss-button-xing{background-image: url(socialshare.png);width: 45px;height: 45px;background-repeat: no-repeat;background-size: 600% 200%;padding: 0px;border: 0px;margin:1% 1% 1% 0;display: inline-block;}
    a.ss-button-twitter{background-position:0% bottom;}a.ss-button-twitter:hover{background-position:0% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.ss-button-googleplus{background-position: 20% bottom;}a.ss-button-googleplus:hover{background-position: 20% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.ss-button-facebook{background-position: 40% bottom;}a.ss-button-facebook:hover{background-position: 40% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.ss-button-linkedin{background-position: 60% bottom;}a.ss-button-linkedin:hover{background-position: 60% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.ss-button-pinterest{background-position: 80% bottom;}a.ss-button-pinterest:hover{background-position: 80% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.ss-button-xing{background-position: 100% bottom;}a.ss-button-xing:hover{background-position: 100% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    
    /* Smartphones (portrait and landscape) */
    @media (max-width : 480px){
    .social-sharing a{text-indent: -99999px;}
    a.button-facebook, a.button-googleplus,a.button-twitter,a.button-linkedin,a.button-pinterest,a.button-xing{background-image: url(socialshare.png) !important;width: 45px;height: 45px;background-repeat: no-repeat;padding: 0px;border: 0px;}
    a.button-twitter{background-position:0% bottom; }a.button-twitter:hover{background-position:0% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.button-googleplus{background-position: 20% bottom;}a.button-googleplus:hover{background-position: 20% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.button-facebook{background-position: 40% bottom;}a.button-facebook:hover{background-position: 40% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.button-linkedin{background-position: 60% bottom;}a.button-linkedin:hover{background-position: 60% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.button-pinterest{background-position: 80% bottom;}a.button-pinterest:hover{background-position: 80% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    a.button-xing{background-position: 100% bottom;}a.button-xing:hover{background-position: 100% top;transition-delay: 0s;transition-duration: 250ms;transition-property: all; transition-timing-function: ease-in-out;}
    }

    https://wordpress.org/plugins/wp-social-sharing/

Viewing 9 replies - 1 through 9 (of 9 total)
Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Resizing of buttons’ is closed to new replies.