Checkmark Toggle Button Animation Using HTML & CSS

 

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn how to create Checkmark Button Animation Using HTML & CSSt in this blog post.

what is check mark?

A check mark, checkmark or tick is an symbol used to indicate the idea "yes".

In this program(Checkmark Toggle Button Animation Using HTML & CSS) first, on the webpage there is a toggle button with a car icon and with text BOOK YOUR RIDE and with black background of webpage when you click on the car icon the background color is changed and car icon also changed with sliding animation to checkmark icon.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Checkmark Toggle Button Animation Using HTML & CSS).

Video Tutorial of Checkmark Toggle Button Animation 

I hope you like this program and video tutorial😊

If you like this program(Checkmark Toggle Button Animation Using HTML & CSS) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Amazing Mail Button SVG Animation | HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

Checkmark Toggle Button Animation[source code] 

Before the sharing the codes of this program(Checkmark Toggle Button Animation).Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file.

In CSS file first (if you not using bootstrap) reset the all default padding and margin to 0.

HTML FILE:

<button id="btn"> <i class="fa fa-car" id="car"></i> <span>Book Your Ride</span> <i class="fa fa-check-circle" aria-hidden="true" id="verify"></i> </button>

CSS FILE:

body { padding: 0; margin: 0; background-color:black; display: flex; height: 100vh; display: flex; justify-content: center; align-items: center; transition: background 1.2s linear; font-family: 'Baloo Paaji 2', cursive; } body.flip { background-color:#20ce71; } button { display: flex; align-items: center; padding: 16px 20px 16px 15px; height: 70px; width:250px; position: relative; font-family: catamaran; font-size: 1em; line-height: 1em; border: 0; font-weight: 600; background-color: white; cursor: pointer; border-radius: 35px; box-shadow: 2px 8px 32px rgba(255, 255, 255, 0.5); transition: box-shadow 0.2s ease, background-color 150ms ease; } button::before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 60px; left: 5px; background-color: rgb(41, 36, 36); transform: scale(1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: 0.5s; } button:focus { box-shadow: 0 8px 64px 16px rgba(0, 0, 0, 0.5); outline: none; } button:hover, button:active { background-color: #eee; } #car { position: absolute; margin-right: 13px; margin-left: 7px; transform-origin: 20% 100%; opacity: 1; color: whitesmoke; font-size: 25px; } span{ margin-left: 65px; font-family: 'Baloo Paaji 2', cursive; font-size: 20px; font-weight: 500; letter-spacing: 0.5px; } @keyframes slide { from { transform: translateX(0); opacity: 1; } to { transform: translateX(180px); opacity: 0; } } @keyframes slide-up-fade { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-16px); opacity: 0; } } @keyframes roll-out { 0% { transform: translate(0); opacity: 1; } 20%{ opacity: 0.8; } 50%{ opacity: 0.5; } 70%{ opacity: 0.2; } 100% { transform: translate(170px); opacity: 0; } } .checked-out button::before{ animation: slide 1s 1; animation-timing-function: ease-in; animation-fill-mode: both; } .checked-out span { animation: slide-up-fade 150ms 1; animation-fill-mode: both; } .checked-out #car { animation: roll-out 1s 1 ; animation-timing-function: ease-in; animation-fill-mode: both; } @keyframes checkmark { from { transform:translateY(0); opacity: 0; } to { transform:translateY(0); opacity: 1; } } #verify{ position: absolute; left: calc(50% - 12px); font-size: 40px; position: absolute; margin-right: 13px; margin-left: -5px; transform-origin: 20% 100%; opacity: 0; color: white; } .checked-out #verify{ animation: checkmark 1150ms 1 1150ms; animation-timing-function: ease-in; animation-fill-mode: both; } .checked-out button { background-color:#26a863; transition-delay: 1150ms; }

JAVASCRIPT FILE:

const btn = document.querySelector('button'); btn.addEventListener('click', () => { document.documentElement.classList.toggle('checked-out'); }); btn.addEventListener('click', () => { document.body.classList.toggle('flip'); }); const icon = document.querySelector() icon.addEventListener('click', () => { document.body.classList.toggle('flip'); });