Social Media Buttons.

<!-- Social Media Buttons Section -->
        <section class="section">
            <h2>Social Media Buttons</h2>

            <!-- Basic Social Buttons -->
            <div class="display-group">
                <h3>Basic Social Buttons</h3>
                <div class="social-buttons">
                    <button class="social-btn facebook">
                        <i class="fab fa-facebook-f"></i>
                        <span>Facebook</span>
                    </button>
                    <button class="social-btn twitter">
                        <i class="fab fa-twitter"></i>
                        <span>Twitter</span>
                    </button>
                    <button class="social-btn instagram">
                        <i class="fab fa-instagram"></i>
                        <span>Instagram</span>
                    </button>
                    <button class="social-btn linkedin">
                        <i class="fab fa-linkedin-in"></i>
                        <span>LinkedIn</span>
                    </button>
                    <button class="social-btn github">
                        <i class="fab fa-github"></i>
                        <span>GitHub</span>
                    </button>
                </div>
            </div>

            <!-- Icon Only Buttons -->
            <div class="display-group">
                <h3>Icon Only</h3>
                <div class="social-buttons">
                    <button class="social-btn social-btn-icon facebook">
                        <i class="fab fa-facebook-f"></i>
                    </button>
                    <button class="social-btn social-btn-icon twitter">
                        <i class="fab fa-twitter"></i>
                    </button>
                    <button class="social-btn social-btn-icon instagram">
                        <i class="fab fa-instagram"></i>
                    </button>
                    <button class="social-btn social-btn-icon linkedin">
                        <i class="fab fa-linkedin-in"></i>
                    </button>
                    <button class="social-btn social-btn-icon github">
                        <i class="fab fa-github"></i>
                    </button>
                </div>
            </div>

            <!-- Rounded Style -->
            <div class="display-group">
                <h3>Rounded Style</h3>
                <div class="social-buttons">
                    <button class="social-btn social-btn-rounded facebook">
                        <i class="fab fa-facebook-f"></i>
                        <span>Share</span>
                    </button>
                    <button class="social-btn social-btn-rounded twitter">
                        <i class="fab fa-twitter"></i>
                        <span>Tweet</span>
                    </button>
                    <button class="social-btn social-btn-rounded instagram">
                        <i class="fab fa-instagram"></i>
                        <span>Share</span>
                    </button>
                    <button class="social-btn social-btn-rounded linkedin">
                        <i class="fab fa-linkedin-in"></i>
                        <span>Share</span>
                    </button>
                    <button class="social-btn social-btn-rounded github">
                        <i class="fab fa-github"></i>
                        <span>Fork</span>
                    </button>
                </div>
            </div>
        </section>