Switch Animation: HTML and CSS Tutorial @rayen-code

Rayen

Interactive elements are essential in modern web design, and one of the most common yet stylish elements is the switch animation. In this tutorial, we'll guide you through the process of creating an engaging switch animation using HTML and CSS. Elevate your web design skills and make your website more user-friendly with this visually appealing design element.




Step 1: HTML Markup:

Start by structuring your HTML to include the element you want to animate. Define the container and the switch-like element, setting the stage for your CSS animations.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Ring Animation</title>

    <!-- CSS Link  -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <input type="checkbox" id="checkbox" class="checkbox">
    <label for="checkbox" class="ring"></label>

</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --bg: #465;
   --ring-one: #7ed7c1;
   --ring-two: #ffecd6;
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg);
}

.ring {
    width: 200px;
    height: 100px;
    position: relative;
    
    cursor: pointer;
    display: flex;
    align-items: center;
}
.ring::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid var(--ring-one);
    border-radius: 100px;
    right: 0;
    transition: 1.5s;
}
.ring::after {
    content: "";
    position: absolute;
    width: 75px;
    height: 75px;
    border: 5px solid var(--ring-two);
    border-radius: 100px;
    left: 12px;
    transition: 1.5s;
}
.checkbox:checked + .ring::before {
    width: 75px;
    height: 75px;
    right: 12px;
}
.checkbox:checked + .ring::after {
    width: 100%;
    height: 100%;
    left: 0;
}
.checkbox {
    display: none;
}

You can customize the switch's size, colors, animation speed, and other properties to match your website's design. Experiment with different styles to achieve the desired switch animation.

Congratulations! You've successfully created a stylish and interactive switch animation using HTML and CSS. This element can enhance user experience and interactivity on your website.

Implement this switch animation in your web forms, settings panels, or any other interactive elements to provide users with an intuitive and visually appealing way to make selections or toggle options.

0 Comments