CSS-Code anzeigen
<style>
@import
url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
ul.social-buttons {
text-align: center;
margin-top: 50px;
}
ul.social-buttons li {
display: inline-block;
margin: 0 10px;
}
ul.social-buttons li a {
width: 60px;
height: 60px;
display: block;
border-radius: 50px;
text-decoration: none;
font-size: 30px;
line-height: 60px;
color: white;
}
ul.social-buttons li a.brandico-twitter-bird {
background-color: #4099FF;
}
ul.social-buttons li a.brandico-facebook {
background-color: #3B5998;
}
ul.social-buttons li a.brandico-instagram {
background-color: #3f729b;
}
ul.social-buttons li a.brandico-vimeo {
background-color: #4EBBFF;
}
ul.social-buttons li a.brandico-linkedin {
background-color: #0e76a8;
}
/*Demo 1*/
ul#demo1 li a {
transition: transform 0.2s linear;
}
ul#demo1 li:hover a {
transform: translateY(-10px);
}
/*Demo 2*/
ul#demo2 li a {
transition: transform 0.5s ease-in-out;
}
ul#demo2 li:hover a {
transform: rotateX(180deg) rotateY(180deg)
rotateZ(180deg);
}
/*Demo 3*/
ul#demo3 li a {
transition: transform 0.2s ease-in-out 0;
}
ul#demo3 li:hover a {
transform: rotateZ(27deg) scale(1.1);
}
</style>
