Skip to content
Advertisements

JavaScript Animation Button

JavaScript Animation Button

githup : https://github.com/guldus98/HTML-CSS/tree/master/animation%20button(javascript)


HTML CODE:

    <div class="container">

        <form class="toggle">

            <input type="radio" id="but1" name="but" />
            <label for="but1">True</label>

            <input type="radio" id="but2" name="but" />
            <label for="but2">Codes</label>

            <div id="flap"><span class="content">true</span></div>

        </form>
    </div>

CSS CODE:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: sans-serif;
    background: #262626;
}
.container {
    perspective:800px;
}
.toggle{
    position:relative;
    border: solid 6px #8a3a00;
    border-radius:55px;
    transition: transform cubic-bezier(0,0,0.30,2) .4s;
    transform-style:preserve-3d;
    perspective:800px;
}
.toggle>input[type="radio"]{
    display:none;
}
.toggle > #but1:checked ~ #flap{
    transform:rotateY(-180deg);
}
.toggle > #but1:checked ~ #flap > .content{
    transform:rotateY(-180deg)
}
.toggle > #but2:checked ~ #flap {
    transform: rotateY(0deg);
}
.toggle > label{
    display:inline-block;
    min-width:170px;
    padding:30px;
    font-size:30px;
    text-align:center;
    color:#8a3a00;
    cursor:pointer;
}
.toggle > label,
.toggle > #flap{
    font-weight:bold;
    text-transform:capitalize;
}
.toggle > #flap{
    position:absolute;
    top: calc(0px - 6px);
    left:50%;
    height:calc(100% + 12px);
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    background:#8a3a00;
    border-top-right-radius:55px;
    border-bottom-right-radius:55px;
    transform-style:preserve-3d;
    transform-origin:left;
    transition: transform cubic-bezier(0.4,0,0.2,1) .5s;
}
.toggle > #flap > .content{
    color:#262626;
    transition:transform 0s linear .25s;
    transform-style:preserve-3d; 
}


JAVASCRIPT CODE:

 let st = {};

        st.flap = document.querySelector("#flap");
        st.toggle = document.querySelector(".toggle");

        st.but1 = document.querySelector("#but1");
        st.but2 = document.querySelector("#but2"); 

        st.flap.addEventListener("transitionend", () => {

            if (st.but1.checked) {
                st.toggle.style.transform = "rotateY(-15deg)";
                setTimeout(() => st.toggle.style.transform = "", 400);
            } else {
                st.toggle.style.transform = "rotateY(15deg)";
                setTimeout(() => st.toggle.style.transform = "", 400)
            }

        })

        st.clickHandler = (e) => {
            if (e.target.tagName === "LABEL") {
                setTimeout(() => {
                    st.flap.children[0].textContent = e.target.textContent;},250);
                }
            }

        document.addEventListener("DOMContentLoaded", () => {
            st.flap.children[0].textContent = st.but2.nextElementSibling.textContent;
        });
        document.addEventListener("click",(e)=>st.clickHandler(e))
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: