Create a Unique 3D Package Toggle Effect with Pure CSS

How to Make a Pure CSS 3D Package Toggle in HTML

Creating a package toggle button with just HTML and CSS is an easy way to add a simple “toggle” feature to your webpage. This tutorial will walk you through the steps of creating a pure CSS 3D package toggle button.

Step 1: Add an HTML Container

The first step is to add an HTML container. This can be done by simply adding the following line to your HTML document:

<div class='container'></div>

Step 2: Add CSS for Styling the Container

Next, add some basic styling for the container. This includes adding background color, borders, and basic sizing. For example, the following code will create a container with a white background, a grey border, and a 500px width:

.container {
  width: 500px;
  background-color: #FFFFFF;
  border: 2px solid #999999;
}

Step 3: Add HTML for the Toggle Elements

Next, add the HTML for the toggle elements. This includes the toggle button, the label, and the content that will be visible when the toggle is activated. The following code will create a toggle button, a label, and a div that contains the content:

<div class='container'>
  <div class='toggle-button'>Toggle</div>
  <label>Package Contents</label>
  <div class='content'>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Step 4: Add CSS for Displaying the Content

Now it's time to add some CSS that will display the content when the toggle is activated. This can be done by adding the following code:

.content {
  display: none;
}

.toggle-button:checked + .content {
  display: block;
}

Step 5: Add CSS for Creating the 3D Effect

Finally, add some CSS that will create the 3D effect for the toggle button. This can be done by adding the following code:

.toggle-button {
  border-radius: 50%;
  padding: 4px;
  width: 30px;
  height: 30px;
  background-color: #f3f3f3;
  position: relative;
  box-shadow: -1px -1px 1px #999;
  transition: all 0.2s ease;
}

.toggle-button:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: -1px -1px 1px #999;
  transition: all 0.2s ease;
}

.toggle-button:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  background-color: #999;
  border-radius: 50%;
  box-shadow: -1px -1px 1px #999;
  transition: all 0.2s ease;
}

.toggle-button:checked:before {
  top: 5px;
  left: 5px;
  box-shadow: 1px 1px 1px #999;
}

.toggle-button:checked:after {
  top: -5px;
  left: -5px;
  box-shadow: 1px 1px 1px #999;
}

Conclusion

By following these steps, you can easily create a pure CSS 3D package toggle button with HTML and CSS. As you can see, creating this toggle button requires very minimal code and can be a great way to add a simple toggle feature to your website.