Description

3D Radio Buttons

This is a simple HTML and CSS project that demonstrates the concept of 3D radio buttons using HTML labels and CSS styles. With these 3D radio buttons, you can select different signal types: AM, FM, and AUX. The selected signal type is highlighted with a 3D effect.

How It Works

This project utilizes HTML and CSS to create a visually appealing 3D effect for radio buttons. Here’s how it works:

• Three radio input elements are used for AM, FM, and AUX signals.
• Labels are associated with each radio input to create custom-styled buttons.
• CSS is used to create a 3D effect on the buttons, giving them a cuboid appearance.
• When a radio button is checked, it triggers a CSS transition to move the selected button forward and change its appearance.
• Hovering over the buttons also triggers a 3D effect.

Technologies Used

• HTML: The structure of the radio buttons and their labels.
• CSS: The styling and 3D effects applied to the radio buttons.

How to Use

1. Clone this repository or download the HTML and CSS files.
2. Open the index.html file in a web browser.

Customization

You can customize this project by modifying the CSS variables in the style.css file. You can change the colors, dimensions, and other visual aspects to fit your design preferences.

/* Example CSS variable customization */
.cuboid {
  --height: 3;
  --width: 10;
  --depth: 10;
  --hue: 220;
  --sat: 20%;
  /* Customize these variables to change the appearance of the buttons */
}

Credits

• Font: Segment16C by José T. Vera

License

This project is licensed under the MIT License – see the LICENSE file for details.

Feel free to use, modify, and share this project as needed.

Enjoy experimenting with 3D radio buttons!