3D Animated Flip Buttons using HTML & CSS

3D design has become increasingly popular in web design and development. One aspect that has particularly stood out is the use of 3D animated flip buttons. These buttons not only add an interactive element to a website, but they also provide a visually appealing design that can greatly enhance the overall user experience.

Today in this blog you’ll learn how to create 3D Flip Buttons in HTML & CSS.

3D animated flip buttons are buttons that use 3D animation to simulate a flip motion when clicked or hovered over. This effect is achieved by using CSS transitions and transforms. The result is a button that looks like it is flipping from one side to the other, providing a unique and eye-catching interaction.

Create 3D Animated Flip Buttons using HTML & CSS (Source Codes)

Create a Folder: Start by creating a folder for your project. You can name it anything you like. Inside this folder, you’ll need to create the following files:

index.html (for the structure of your 3D Button)
style.css (for styling the 3DButton)

Create the HTML File:

Name your HTML file index.html.

Create the CSS File:

Name your CSS file style.css.

Step 1: structure in HTML for button

The first step is to define the structure of the button in HTML.

				
					<!DOCTYPE html>
<!-- NotArena || www.NotArena.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Animation Buttons</title>
    <link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-9217169b-3c90-440d-bf5a-ed37d83872e3: url('https://notarena.com/wp-content/plugins/ultimate-post/assets/img/loading.gif');}.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-fcf09028-7d09-4207-95ff-0ab6f60542e0: url('https://i0.wp.com/notarena.com/wp-content/uploads/2024/10/BG.png?fit=1200%2C726&ssl=1');}.rll-youtube-player .play{--wpr-bg-283b2b7f-67d4-4986-9f3b-4500c79e4791: url('https://notarena.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".ultp-block-wrapper .slick-loading .slick-list","style":".ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-9217169b-3c90-440d-bf5a-ed37d83872e3: url('https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif');}","hash":"9217169b-3c90-440d-bf5a-ed37d83872e3","url":"https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif"},{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-fcf09028-7d09-4207-95ff-0ab6f60542e0: url('https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1');}","hash":"fcf09028-7d09-4207-95ff-0ab6f60542e0","url":"https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-283b2b7f-67d4-4986-9f3b-4500c79e4791: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"283b2b7f-67d4-4986-9f3b-4500c79e4791","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
    <div class="button-container">
        <a href="#" class="flip-button">Flip Me</a>
        <a href="#" class="flip-button">Press Me</a>
    </div>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/notarena.com\/wp-admin\/admin-ajax.php","nonce":"c2cf1612df","url":"https:\/\/notarena.com\/code-library\/3d-animated-flip-buttons-using-html-amp-css","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://notarena.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

Step 2: Style the button in CSS

Second, we will use CSS to add styles to our button and create the 3D animation. Here’s an example of the CSS code needed for a button

				
					 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #5c00ac;
    font-family: 'Arial', sans-serif;
}

.button-container {
    display: flex;
    gap: 20px;
}

.flip-button {
    position: relative;
    display: inline-block;
    padding: 15px 40px;
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    background: #3498db;
    border-radius: 10px;
    border: 2px solid #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.6s ease, background 0.3s ease;
    perspective: 1000px;
}

.flip-button:hover {
    background: #2ecc71;
    transform: rotateY(180deg);
}

.flip-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.flip-button:hover::before {
    transform: translateY(0);
}

@keyframes flipAnimation {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

.flip-button:hover {
    animation: flipAnimation 0.6s forwards;
}

@media (max-width: 768px) {
    .flip-button {
        font-size: 16px;
        padding: 12px 30px;
    }
}

Keyframes: Smooth transitions and animations for modern interaction.
Responsive: Scales down on mobile devices for optimal user experience.

That’s all, now you’ve successfully created 3D animated flip buttons can greatly enhance the design and interactive experience of a website. With HTML and CSS, it is possible to create multiple variations of these buttons without any additional libraries or plugins. By using CSS variables and loops, we can easily create a large number of 3D animated flip buttons with different styles. So, go ahead and experiment with these buttons to add a touch of creativity and interactivity to your website.

If the code doesn’t work or if you run into any issues, please leave a comment below or reach out to us through the contact page.