Reputation: 606
I'm trying to add some animations to buttons that go to my social networks in my portfolio webpage.
I want to add animations only to the icons and not to the whole "button".
The problem here is that seems that I stylized my FA as buttons and didn't make buttons as elements. But i cannot figure out how to change this or make a button work as a link but with the FA icon.
HTML
<a target='_blank' href="mylinktofb" class="fa fa-facebook fa-3x"></a>
<a target='_blank' href="mylinktoig" class="fa fa-instagram fa-3x"></a>
<a target='_blank' href="mylinktoli" class="fa fa-linkedin fa-3x"></a>
<a id="fcc" target='_blank' href="mylinktofc" class="fa fa-free-code-camp fa-3x"></a>
<a target='_blank' href="mylinktocp" class="fa fa-codepen fa-3x"></a>
<a target='_blank' href="mylinktogh" class="fa fa-github fa-3x"></a>
CSS
.fa {
display: block;
float: left;
margin: auto;
height: 50px;
font-size: 30px;
padding-top: 10px;
width: 225px;
text-align: center;
text-decoration: none;
}
.fa-facebook {
background: #3b5998;
color: white;
}
.fa-instagram {
background: #fd1d1d;
color: white;
}
.fa-codepen {
background: black;
color: white;
}
.fa-github {
background: #333;
color: white;
}
.fa-linkedin {
background: #0077b5;
color: white;
}
#fcc {
background: #006400;
color: white;
}
As an example, i want to put this effect to them: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate1
Thanks to all in advance!
Upvotes: 1
Views: 2585
Reputation: 1382
Obviously the font awesome is not present here, just did it for facebook and replaced the icon with an "f":
.social {
display:block;
float:left;
margin:auto;
height: 50px;
font-size: 30px;
padding-top: 10px;
width: 225px;
text-align: center;
text-decoration: none;
}
.my-facebook {
background: #3B5998;
color: white;
}
.social i {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.social i:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.social:hover i {
padding-right: 25px;
}
.social:hover i:after {
opacity: 1;
right: 0;
}
<a class="social my-facebook" target='_blank' href="mylinktofb"><i class="fa fa-facebook fa-3x">f</i></a>
EDIT: Added some classes. Better reference now :)
Hope it helps, Regards
Upvotes: 1
Reputation: 1859
Wrap your old tag around each icon like so. This way you can animate just the icon.
<a target='_blank' href="mylinktofb">
<i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
</a>
Upvotes: 0