Custom Play Button Animation using HTML and CSS

This dynamic component features a play button at its core, adorned with eye-catching animations. By the end of this post, you'll have a better understanding of how to create playful and attractive UI elements for your web applications.

Must Read:- Professional Loading Animation using HTML, CSS and JavaScript

Below is the HTML structure of our Play button UI component.

<div class="main-container">
    <button class="play-btn">
        <div class="inner">
            PLAY
            <div class="lt-side corner"></div>
            <div class="rt-side corner"></div>
            <div class="rb-side corner"></div>
            <div class="lb-side corner"></div>
        </div>
        <div class="left-arrow arrow"></div>
        <div class="right-arrow arrow"></div>
    </button>
</div>

This HTML structure defines a main container that houses a "Play" button. The button consists of an inner container with four corner divs for decoration and two arrow divs for additional visual appeal.

To style our Play button UI component, we use CSS code which is given below.

.main-container {
    min-width: 250px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

.inner {
    width: 150px;
    height: 50px;
    color: white;
    display: grid;
    font-size: 1rem;
    align-items: center;
    overflow: hidden;
    transition: 0.3s;
    font-weight: bold;
    position: relative;
    letter-spacing: .2rem;
    border: 5px double #2861c1;
    box-shadow: inset 0px 0px 15px 3px #1c6399;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.corner {
    position: absolute;
    background: #2861c1;
    width: 2rem;
    height: 4rem;
    box-shadow: inset 0px 0px 8px #2e8ed3;
    transition: all .1s ease-in;
}

.lt-side {
    left: -25px;
    top: -20px;
    transform: rotate(45deg);
}

.rt-side {
    right: -25px;
    top: -20px;
    transform: rotate(-45deg);
}

.rb-side {
    right: -25px;
    bottom: -20px;
    transform: rotate(45deg);
}

.lb-side {
    left: -25px;
    bottom: -20px;
    transform: rotate(-45deg);
}

.play-btn:hover .inner {
    box-shadow: inset 0px 0px 20px 10px #1c6399;
    transform: scale(0.95);
}

.play-btn:hover .lt-side {
    left: -10px;
    top: -25px;
}

.play-btn:hover .rt-side {
    right: -10px;
    top: -25px;
}

.play-btn:hover .rb-side {
    bottom: -25px;
    right: -10px;
}

.play-btn:hover .lb-side {
    bottom: -25px;
    left: -10px;
}

.arrow {
    position: absolute;
    background: #2861c1;
    width: 1rem;
    height: 1rem;
    transition: .2s;
    top: 50%;
    transform: translateY(-50%);
}

.right-arrow {
    right: -12.5%;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.left-arrow {
    left: -12.5%;
    clip-path: polygon(0% 50%, 100% 0, 100% 100%);
}

.play-btn:hover .left-arrow {
    left: 102.5%;
    animation: float_left_arrow 0.6s ease-in-out both infinite alternate;
}

.play-btn:hover .right-arrow {
    right: 102.5%;
    animation: float_right_arrow 0.6s ease-in-out both infinite alternate;
}

@keyframes float_left_arrow {
    to {
        transform: translate(0.7rem, -50%);
    }
}

@keyframes float_right_arrow {
    to {
        transform: translate(-0.7rem, -50%);
    }
}

Creating engaging UI components like this Play button can elevate the user experience of your web applications. This component combines aesthetics and interactivity, capturing your users' attention in a playful way. Customize and integrate it into your projects to make your interfaces more dynamic and visually appealing.

Feel free to experiment with the provided code, add animations, and tailor it to your project's needs. Share your thoughts and questions in the comments below.

Download