|
<style> |
|
html { |
|
box-sizing: border-box; |
|
font-family: "Avenir Next", sans-serif; |
|
} |
|
html * { |
|
box-sizing: inherit; |
|
} |
|
.share { |
|
width: 15em; |
|
white-space: nowrap; |
|
text-align: center; |
|
max-width: 100%; |
|
} |
|
.share-title { |
|
font-size: .8em; |
|
text-transform: uppercase; |
|
letter-spacing: .03em; |
|
text-indent: .03em; |
|
} |
|
.share-icons { |
|
font-size: 0; |
|
} |
|
a.share-icon { |
|
display: inline-block; |
|
font-size: 1rem; |
|
width: 4em; |
|
height: 4em; |
|
padding: 1em; |
|
color: currentColor; |
|
} |
|
a.share-icon:hover svg { |
|
fill: currentColor; |
|
} |
|
</style> |
|
<div class="share"> |
|
<div class="share-title">Share on</div> |
|
<div class="share-icons"> |
|
<a class="share-icon" href="http://www.facebook.com/sharer.php?u=URL" target="_blank"> |
|
<svg version="1.1" viewBox="0 0 16 16" fill="#3b5998"> |
|
<path d="M4.025,5.291H5.68V4.541V3.805V3.683c0-0.708,0.018-1.802,0.533-2.479C6.755,0.487,7.5,0,8.781,0 c2.087,0,2.966,0.297,2.966,0.297l-0.414,2.451c0,0-0.689-0.199-1.333-0.199c-0.643,0-1.219,0.23-1.219,0.873v0.26v0.858v0.751 h2.638l-0.184,2.393H8.781V16H5.68V7.684H4.025V5.291"></path> |
|
</svg> |
|
</a> |
|
<a class="share-icon" href="https://twitter.com/intent/tweet/?text=TEXT&url=URL&via=VIA" target="_blank"> |
|
<svg version="1.1" viewBox="0 0 16 16" fill="#00aced"> |
|
<path d="M16,3.536c-0.589,0.261-1.221,0.438-1.885,0.517c0.678-0.406,1.198-1.05,1.443-1.816c-0.634,0.376-1.337,0.649-2.085,0.797 c-0.599-0.638-1.452-1.037-2.396-1.037c-1.813,0-3.283,1.47-3.283,3.282c0,0.257,0.029,0.508,0.085,0.748 c-2.728-0.137-5.147-1.444-6.766-3.43c-0.283,0.485-0.444,1.049-0.444,1.65c0,1.139,0.579,2.144,1.46,2.732 C1.592,6.963,1.086,6.816,0.643,6.57c0,0.014,0,0.027,0,0.041c0,1.59,1.132,2.917,2.633,3.219C3,9.905,2.71,9.945,2.411,9.945 c-0.212,0-0.417-0.021-0.618-0.059c0.418,1.304,1.63,2.253,3.066,2.28c-1.123,0.88-2.539,1.405-4.077,1.405 c-0.265,0-0.526-0.016-0.783-0.046C1.453,14.456,3.178,15,5.032,15c6.038,0,9.34-5.002,9.34-9.34c0-0.142-0.003-0.284-0.01-0.425 C15.003,4.773,15.56,4.195,16,3.536z"></path> |
|
</svg> |
|
</a> |
|
<a class="share-icon" href="mailto:?subject=TEXT&body=URL" target="_blank"> |
|
<svg version="1.1" viewBox="0 0 24 24" fill="#ff5722"> |
|
<path d="M22,4H2C0.897,4,0,4.897,0,6v12c0,1.103,0.897,2,2,2h20c1.103,0,2-0.897,2-2V6C24,4.897,23.103,4,22,4z M7.248,14.434 l-3.5,2C3.67,16.479,3.584,16.5,3.5,16.5c-0.174,0-0.342-0.09-0.435-0.252c-0.137-0.239-0.054-0.545,0.186-0.682l3.5-2 c0.24-0.137,0.545-0.054,0.682,0.186C7.571,13.992,7.488,14.297,7.248,14.434z M12,14.5c-0.094,0-0.189-0.026-0.271-0.08l-8.5-5.5 C2.997,8.77,2.93,8.46,3.081,8.229c0.15-0.23,0.459-0.298,0.691-0.147L12,13.405l8.229-5.324c0.232-0.15,0.542-0.084,0.691,0.147 c0.15,0.232,0.083,0.542-0.148,0.691l-8.5,5.5C12.189,14.474,12.095,14.5,12,14.5z M20.934,16.248 C20.842,16.41,20.673,16.5,20.5,16.5c-0.084,0-0.169-0.021-0.248-0.065l-3.5-2c-0.24-0.137-0.323-0.442-0.186-0.682 s0.443-0.322,0.682-0.186l3.5,2C20.988,15.703,21.071,16.009,20.934,16.248z"></path> |
|
</svg> |
|
</a> |
|
</div> |
|
</div> |
Demo