shr-buttons/dist/shr.css

Simple, customizable sharing buttons

.shr,.shr__button{display:inline-flex;align-items:center;vertical-align:middle;margin-top:5px;margin-bottom:5px;white-space:nowrap}.shr .shr__button{margin-top:0;margin-bottom:0}.shr+.shr,.shr+.shr__button,.shr__button+.shr,.shr__button+.shr__button{margin-left:10px}.shr__button,.shr__count{vertical-align:middle;border-radius:4px;font-weight:500;box-shadow:rgba(0,0,0,.9)}.shr__button{padding:5px 10px;background-color:#3b5998;color:#fff;transition:all .3s ease;color:#fff;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0}.shr__button:focus,.shr__button:hover{background-color:#37538d}.shr__button:focus{box-shadow:0 0 0 3px rgba(59,89,152,.34)}.shr__button:focus{outline:0}.shr__button:focus,.shr__button:hover{border:0}.shr__button svg{display:inline-block;fill:currentColor;width:16px;height:16px;margin-right:10px}.shr__button--facebook{background-color:#3c569a;color:#fff}.shr__button--facebook:focus,.shr__button--facebook:hover{background-color:#38508f}.shr__button--facebook:focus{box-shadow:0 0 0 3px rgba(60,86,154,.34)}.shr__button--twitter{background-color:#4baaf4;color:#fff}.shr__button--twitter:focus,.shr__button--twitter:hover{background-color:#3da3f3}.shr__button--twitter:focus{box-shadow:0 0 0 3px rgba(75,170,244,.34)}.shr__button--pinterest{background-color:#cb2026;color:#fff}.shr__button--pinterest:focus,.shr__button--pinterest:hover{background-color:#be1e24}.shr__button--pinterest:focus{box-shadow:0 0 0 3px rgba(203,32,38,.34)}.shr__button--google{background-color:#df4f3f;color:#fff}.shr__button--google:focus,.shr__button--google:hover{background-color:#dd4332}.shr__button--google:focus{box-shadow:0 0 0 3px rgba(223,79,63,.34)}.shr__button--github{background-color:#f5f5f5;color:#333}.shr__button--github:focus,.shr__button--github:hover{background-color:#ededed}.shr__button--github:focus{box-shadow:0 0 0 3px #dcdcdc}.shr__button--youtube{background-color:red;color:#fff}.shr__button--youtube:focus,.shr__button--youtube:hover{background-color:#f00000}.shr__button--youtube:focus{box-shadow:0 0 0 3px rgba(255,0,0,.34)}.shr__count{display:inline-block;position:relative;padding:5px 6.66667px;background:#fff;text-align:center;min-width:32px;color:#55646b}.shr__count::before{content:"";position:absolute;width:8px;height:8px;top:50%;margin-top:-4px;background:inherit}.shr__count--after{margin-left:10px}.shr__count--after::before{left:2px;transform:rotate(-45deg) translate(-50%,-50%)}.shr__count--before{margin-right:10px}.shr__count--before::before{right:2px;transform:rotate(135deg) translate(-50%,-50%)}