<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Animated social SVG icons (pt1)</title>
<link rel='stylesheet prefetch' href='css/akqykx.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id=social>
<h1>Animated social SVG icons (pt1)</h1>
<nav>New window:
<a class=lnk href="https://codepen.io/2kool2/pen/LkBgZd" target=_blank>Part 1</a> -
<a class=lnk href="https://codepen.io/2kool2/pen/BzqQgZ" target=_blank>Part 2</a> -
<a class=lnk href="https://codepen.io/2kool2/pen/bZmkjE" target=_blank>Part 3</a>
</nav>
<ul class="social_list goo">
<!--
In production each link may require a new window.
If so add:
target=_blank
rel=external
title="[new window]"
-->
<li><a class=social_lnk-codepen href=#social aria-label="CodePen"><span>CodePen</span></a></li>
<li><a class=social_lnk-facebook href=#social aria-label="Facebook"><span>Facebook</span></a></li>
<li><a class=social_lnk-twitter href=#social aria-label="Twitter"><span>Twitter</span></a></li>
<li><a class=social_lnk-googleplus href=#social aria-label="Google+"><span>Google+</span></a></li>
<li><a class=social_lnk-linkedin href=#social aria-label="Linked In"><span>Linked In</span></a></li>
</ul>
<h2>Features</h2>
<ul>
<li>Monochrome until hover (or focus)</li>
<li>Accessible: no duplicate reads, colour contrast, large click areas</li>
<li>Positive feedback via animated click depression</li>
<li>Highly optimised SVG icons</li>
<li>CSS embedded raw SVGs (which also work in IE)</li>
<li>Lightweight vanilla JavaScript</li>
<li>Zero dependencies.</li>
</ul>
<h2>Current status</h2>
<p>In cross-browser / cross-platform testing (01/08/2016).</p>
<p><a class=lnk href="https://websemantics.uk/tools/svg-to-background-image-conversion/" target=_blank>Convert SVGs into cross-browser CSS background-images</a></p>
<h2>To do</h2>
<p>Facebook and Linked In icons are a little too thick relatively.</p>
</section>
<!-- -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feComposite in2="shadow" in="goo" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/2kool2/animated-social-svg-icons-pt1-LkBgZd */
[class*="social_lnk"] {
position: relative;
display: inline-block;
padding: .125em;
border-radius: 50%;
text-decoration: none;
background-color: #3B2D4A;
width: 3rem;
height: 3rem;
outline: 0 solid;
box-shadow: 0 .25em .25em rgba(0, 0, 0, .3);
transition: all .3s ease-out;
animation: social-hoverOff .3s ease-out;
}
[class*="social_lnk"]:hover,
[class*="social_lnk"]:focus {
background-color: currentColor;
outline: 0 solid;
transform: scale(1.12);
box-shadow: 0 .5em .5em rgba(0, 0, 0, .4);
animation: social-hoverOn .3s ease-out;
}
[class*="social_lnk"].-clicked {
animation: pressed-social .3s ease-out;
}
@keyframes pressed-social {
0% {
transform: scale(1.1);
}
50% {
transform: scale(.8);
background-color: #3B2D4A;
box-shadow: 0 .5em .5em rgba(0, 0, 0, 0);
}
100% {
transform: scale(1.2);
}
}
/* Individual social links */
.social_lnk-twitter {
color: #37A7DF;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M15.2 31.44c2.4 0 4.47-.74 6.1-2.08-2.22 0-4-1.5-4.6-3.43.3.15.6.15.9.15.44 0 .88 0 1.33-.15-2.23-.44-3.87-2.38-3.87-4.76.75.3 1.5.6 2.23.6-1.36-.9-2.25-2.38-2.25-4.02 0-.9.15-1.8.6-2.53 2.38 2.98 6.1 4.9 10.12 5.06-.15-.3-.15-.6-.15-1.04 0-2.68 2.23-4.9 4.9-4.9 1.35 0 2.7.58 3.58 1.47 1.2-.27 2.24-.57 3.14-1.17-.3 1.05-1.05 2.1-2.1 2.68 1.05-.14 1.95-.3 2.84-.73-.6 1.04-1.5 1.78-2.53 2.53v.58c0 6.55-4.9 14-14 14-2.67 0-5.2-.9-7.43-2.24h1.2z'/%3E%3C/svg%3E");
}
.social_lnk-linkedin {
color: #007BB5;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M18.37 19.97V36h-5V19.96h5zm7.96 2.2c.66-1.27 2.3-2.6 4.7-2.6 5.05 0 5.98 3.32 5.98 7.64V36h-4.96v-7.8c0-1.86-.03-4.25-2.58-4.25-2.6 0-3 2.03-3 4.12V36H21.5V19.96h4.76v2.2h.07zM15.88 12c1.6 0 2.88 1.3 2.88 2.9 0 1.6-1.3 2.88-2.88 2.88-1.6 0-2.9-1.3-2.9-2.88 0-1.6 1.3-2.9 2.9-2.9z'/%3E%3C/svg%3E");
}
.social_lnk-codepen {
color: #000;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M24.6 8.5c-.3-.4-.8-.5-1.6 0L8.7 18c-.4 0-.7.4-.7 1.2v9.5c0 .7.3 1 .7 1.3L23 39.6c.7.3 1.3.3 1.6 0L39.3 30c.5-.3.7-.8.7-1.3v-9.5c0-1-.7-1.2-.7-1.2L24.6 8.5zm-2 27.6L12 29l4.7-3.2 6 4.2v6zm2.7 0v-6l6-4 4.7 3-10.5 7zM24 27l-4.8-3 4.8-3.2 4.8 3.2-4.8 3zm-13.3-5.3l3.7 2.3-3.7 2.2v-4.5zm26.6 4.5L33.6 24l3.7-2.3v4.5zm-12-14.4L36 19.2l-4.7 3.2-6-4v-6.6zm-2.6 0v6.4l-6 4.2-4.8-3.2L22.2 12v-.2z'/%3E%3C/svg%3E");
}
.social_lnk-googleplus {
color: #dd4b39;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8.04 23.47c.1-5.5 5.16-10.33 10.66-10.15 2.64-.12 5.12 1.03 7.14 2.64-.86.98-1.75 1.92-2.7 2.8-2.43-1.67-5.9-2.15-8.32-.2-3.47 2.4-3.63 8.06-.3 10.65 3.26 3 9.4 1.5 10.3-3-2.03 0-4.07 0-6.1-.03-.02-1.2-.02-2.4-.02-3.63h10.22c.2 2.87-.17 5.9-1.93 8.27-2.7 3.74-8 4.84-12.2 3.24S7.62 28 8 23.5zm25.82-4.1h3.04c0 1 0 2.04.02 3.06 1.02 0 2.04 0 3.05.02v3.04h-3.05c0 1 0 2-.02 3h-3.04c0-1 0-2.03-.02-3.04-1.02 0-2.04 0-3.05-.03V22.4l3-.02v-3.03z'/%3E%3C/svg%3E");
}
.social_lnk-facebook {
color: #3C5193;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M19.6 15.4c0-1.4 0-3.6 1-5C21.8 9 23.2 8 25.8 8c4.2 0 6 .6 6 .6l-.8 4.8s-1.3-.4-2.5-.4c-1.3 0-2.5.4-2.5 1.8v3.8h5.2l-.4 4.8h-5V40h-6.2V23.4h-3.4v-4.8h3.4v-3.2z'/%3E%3C/svg%3E");
}
[class*="social_lnk"] span {
display: none;
}
/* Layout */
.social_list {
list-style: none;
display: flex;
padding: 0;
margin: 2rem auto;
max-width: 21rem;
}
.social_list li {
flex: 1 1 0;
text-align: center;
}
/* The animated tooltip */
.xxx[class*="social_lnk"]::before {
content: attr(aria-label);
position: absolute;
left: 50%;
bottom: -100%;
font-size: .8rem;
white-space: nowrap;
color: white;
background-color: #3B2D4A;
/* Less accessible option: background-color: inherit;*/
padding: .5em .7em .4em;
box-shadow: 0 .5em .5em rgba(0, 0, 0, .4);
opacity: 0;
transform: translate(-50%, -180%) scale(0.7);
border-radius: 2em;
transition: .3s;
}
[class*="social_lnk"]:hover::before,
[class*="social_lnk"]:focus::before {
opacity: 1;
transform: translate(-50%, -70%) scale(1);
}
[class*="social_lnk"].-clicked::before {
/* Couldn't see a use but you may */
}
/*Downloaded from https://www.codeseek.co/2kool2/animated-social-svg-icons-pt1-LkBgZd */
(function () {
// add click animation to social links
var socials = document.querySelectorAll("[class*=social_lnk]");
var i = socials.length;
var cls = "-clicked";
while (i--) {
socials[i].addEventListener("click", function(e){
var lnk = e.target;
lnk.classList.add(cls);
// Allow time for animation to complete then remove
setTimeout(function() {
lnk.classList.remove(cls);
}, 300);
}, false);
}
})();
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
![FAQ using ARIA attributes to meet WCAG 2 level AA [without a button]](https://codepen.io/2kool2/pen/RJaBYP/image/small.png)
