https://github.com/withaarzoo/3d-radio-button

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
https://github.com/withaarzoo/3d-radio-button

css html html-css radio-buttons webdevelopment

Last synced: about 12 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/withaarzoo/3d-radio-button
• Owner: withaarzoo
• Created: 2023-08-19T15:42:57.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-19T15:48:56.000Z (about 1 year ago)
• Last Synced: 2023-12-30T18:51:48.502Z (11 months ago)
• Topics: css, html, html-css, radio-buttons, webdevelopment
• Language: CSS
• Homepage:
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.

```css

/* 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](https://cdn.josetxu.com/fonts/Segment16C-Bold-Italic.ttf) by [José T. Vera](https://www.josetxu.com/)

  

## 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!

## Preview