DocsAllOver Interactive Social Media Buttons with CSS and JS Snippets

Interactive Social Media Buttons with CSS and JS

Oct. 15, 2024

CSS, Responsive

Full Screen

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Social Media Buttons</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css">
</head>
<body>
    <div class="con-social-btns">
        <button>
            <i class='bx bxl-instagram-alt' ></i>
            <div class="bg"></div>
        </button>
        <button>
            <i class='bx bxl-twitter' ></i>
            <div class="bg"></div>
        </button>
        <button>
            <i class='bx bxl-github' ></i>
            <div class="bg"></div>
        </button>
        <button>
            <i class='bx bxl-discord' ></i>
            <div class="bg"></div>
        </button>
        <button>
            <i class='bx bxl-codepen' ></i>
            <div class="bg"></div>
        </button>
    </div>
</body>
</html>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #F1F3F6;
}

* {
    list-style: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

.con-social-btns {
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px;
    color: #fff;
    cursor: pointer;
    background: transparent;
    position: relative;
    transition: all .25s ease;
    /* margin-left: -12px;
        margin-right: -12px; */
}

button:active {
    transform: scale(.85);
}

.bg {
    position: absolute;
    width: 60px;
    background: rgb(65, 53, 214);
    height: 60px;
    border-radius: 25px;
    pointer-events: none;
    box-shadow: 0px 8px 35px 0px rgba(65, 53, 214, .25);
}

button i {
    pointer-events: none;
    font-size: 1.8rem;
    z-index: 10;
    position: relative;
}

const btns = document.querySelectorAll('.con-social-btns button')

btns.forEach((item) => {
    item.addEventListener('mousemove', (evt) => {
        const x = evt.layerX - 60
        const y = evt.layerY - 60
        const bg = evt.target.querySelector('.bg')
        const i = evt.target.querySelector('i.bx')
        bg.style.transform = `translate(${x / 8}px, ${y / 8}px)`
        i.style.transform = `translate(${x / 4}px, ${y / 4}px)`
    })

    item.addEventListener('mouseenter', (evt) => {
        const bg = evt.target.querySelector('.bg')
        const i = evt.target.querySelector('i.bx')
        bg.style.transition = 'all .15s ease'
        i.style.transition = 'all .15s ease'
        setTimeout(() => {
            bg.style.transition = ''
            i.style.transition = ''
        }, 150);
    })

    item.addEventListener('mouseleave', (evt) => {
        const bg = evt.target.querySelector('.bg')
        const i = evt.target.querySelector('i.bx')
        bg.style.transition = 'all .25s ease'
        i.style.transition = 'all .25s ease'
        bg.style.transform = `translate(${0}px, ${0}px)`
        i.style.transform = `translate(${0}px, ${0}px)`

        setTimeout(() => {
            bg.style.transition = ''
            i.style.transition = ''
        }, 250);
    })
})

This snippet creates a row of interactive social media buttons using CSS and JavaScript. The buttons are designed to be visually appealing and responsive, with subtle animations on hover. When clicked, the buttons will open the corresponding social media profile or website in a new tab.

Key Features:

Responsive Design: The buttons adapt seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the buttons using CSS to match your website's design and branding.
Interactive Hover Effects: The buttons feature subtle animations on hover, providing visual feedback to the user.
Clickable Links: Each button is linked to the corresponding social media profile or website, allowing users to easily access your online presence.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the social media buttons, including the container and individual button elements.
Apply CSS Styles: Use CSS to style the buttons, including their background color, border, font size, and hover effects. You can also customize the icons used for each social media platform.
Add JavaScript Functionality: Implement JavaScript code to handle the click events for each button, opening the corresponding link in a new tab. You can use event listeners and the window.open() function to achieve this.

Latest Snippets

View All