Simple Social Media Buttons

Preview

Generated HTML

1
2<div class="social-icons">
3    <a href="https://facebook.com/" class="social-icon" target="_blank" rel="noopener noreferrer">
4        <i class="fab fa-facebook"></i>
5    </a>
6    <a href="https://twitter.com/" class="social-icon" target="_blank" rel="noopener noreferrer">
7        <i class="fab fa-twitter"></i>
8    </a>
9    <a href="https://instagram.com/" class="social-icon" target="_blank" rel="noopener noreferrer">
10        <i class="fab fa-instagram"></i>
11    </a>
12</div>
13

Generated CSS

1
2.social-icons {
3    display: flex;
4    justify-content: center;
5    align-items: center;
6}
7
8.social-icon {
9    color: #ffffff;
10    font-size: 24px;
11    margin: 0 8px;
12    transition: opacity 0.3s ease;
13}
14
15.social-icon:hover {
16    opacity: 0.8;
17}
18