Create Pure CSS Based Toggle Visibility Button

Learn how to create a pure CSS-based toggle visibility button with this comprehensive guide. No JavaScript needed! Perfect for beginners and advanced developers alike.

Create Pure CSS Based Toggle Visibility Button

Creating interactive elements using only CSS is a powerful skill that can greatly enhance the user experience on your website while maintaining optimal performance. One such interactive element is a toggle visibility button. This guide will walk you through creating a pure CSS-based toggle visibility button, which you can use to show and hide content without relying on JavaScript.

Why Use Pure CSS for Toggle Visibility?

Using CSS for toggling visibility has several advantages:

Performance: CSS animations and transitions are generally more performant than JavaScript.
Simplicity: It reduces the complexity of your code by eliminating the need for JavaScript for simple interactions.
Accessibility: CSS solutions can be more accessible since they rely on the browser’s rendering engine to handle interactions.

Step-by-Step Guide to Create a Pure CSS Toggle Visibility Button

Let’s start with the basic structure of our HTML and CSS.

Step 1: Basic HTML Structure

First, we’ll set up the basic HTML structure for our toggle visibility button. We’ll create a button and the content that will be toggled.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Pure CSS Based Toggle Visibility Button</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="toggle-button">Toggle Content</button>
    <div class="toggle-content">
        <p>This content will be toggled on and off.</p>
    </div>
</body>
</html>

In this structure, we have a button with the class toggle-button and a div containing the content to be toggled with the class toggle-content.

Step 2: Basic CSS Styling

Next, we’ll add some basic styling for our button and content.

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.toggle-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.toggle-button:hover {
    background-color: #0056b3;
}

.toggle-content {
    margin-top: 20px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

Here, we have styled the body to center the content vertically and horizontally. The button is styled with padding, font size, background color, and a hover effect. The toggle-content div is initially hidden with opacity: 0 and max-height: 0.

Step 3: Adding CSS for Toggling Visibility

To achieve the toggle effect using only CSS, we will use the :checked pseudo-class in combination with the + adjacent sibling combinator.

First, let’s modify our HTML structure slightly to include a hidden checkbox that will control the toggling.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Pure CSS Based Toggle Visibility Button</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="checkbox" id="toggle" class="toggle-checkbox">
    <label for="toggle" class="toggle-button">Toggle Content</label>
    <div class="toggle-content">
        <p>This content will be toggled on and off.</p>
    </div>
</body>
</html>

In this structure, we added an input element of type checkbox and a label element that acts as our button. The label is associated with the checkbox using the for attribute.

Now, let’s add the CSS that will handle the toggling effect.

.toggle-checkbox {
    display: none;
}

.toggle-checkbox:checked + .toggle-button + .toggle-content {
    opacity: 1;
    max-height: 1000px; /* Arbitrarily large value to allow for the content to be fully visible */
}

Here, we hide the checkbox with display: none;. When the checkbox is checked, we use the adjacent sibling combinator + to select the toggle-content div and set its opacity to 1 and max-height to a large value to make it fully visible.

Enhancing the Toggle Visibility Button

To make our toggle visibility button more interactive and visually appealing, we can add some animations and transitions.

Step 4: Adding Transitions and Animations

We’ll enhance the transition effects for the content visibility.

.toggle-content {
    margin-top: 20px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.5s ease;
}

.toggle-checkbox:checked + .toggle-button + .toggle-content {
    opacity: 1;
    max-height: 1000px;
    transition: opacity 0.3s ease, max-height 0.5s ease;
}

Here, we added a smoother transition for max-height to enhance the toggling effect.

Step 5: Accessibility and Usability Enhancements

To make our toggle button more accessible, we can add focus styles and ensure it is keyboard-navigable.

.toggle-button:focus {
    outline: 2px solid #0056b3;
}

.toggle-checkbox:focus + .toggle-button {
    outline: 2px solid #0056b3;
}

These styles provide a clear visual indication when the toggle button is focused.

Putting It All Together

Here is the complete HTML and CSS code for our pure CSS-based toggle visibility button.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Pure CSS Based Toggle Visibility Button</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="checkbox" id="toggle" class="toggle-checkbox">
    <label for="toggle" class="toggle-button">Toggle Content</label>
    <div class="toggle-content">
        <p>This content will be toggled on and off.</p>
    </div>
</body>
</html>

CSS:

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.toggle-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.toggle-button:hover {
    background-color: #0056b3;
}

.toggle-button:focus {
    outline: 2px solid #0056b3;
}

.toggle-content {
    margin-top: 20px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.5s ease;
}

.toggle-checkbox {
    display: none;
}

.toggle-checkbox:checked + .toggle-button + .toggle-content {
    opacity: 1;
    max-height: 1000px;
    transition: opacity 0.3s ease, max-height 0.5s ease;
}

Conclusion

In this guide, we created a pure CSS-based toggle visibility button, a simple yet powerful component for any web project. This solution leverages CSS’s capabilities to create interactive elements without relying on JavaScript, enhancing performance and simplicity. By following these steps, you can implement a similar solution in your projects and customize it to fit your specific needs.

If you’re looking for help with building or maintaining your WordPress website, Aregb is a company that provides outsourced WordPress development services. They offer a variety of services including new site development, maintenance, SEO, and more. You can visit their website at Aregb to learn more about their services.

You May Also Like: