Discover the art of crafting wooden toggle buttons with our HTML and CSS guide. Elevate your web design with unique, user-friendly UI elements.
Table of Contents
Welcome to the exciting realm of custom web design! In this comprehensive guide, we'll walk you through the step-by-step process of creating wooden toggle buttons using HTML and CSS. Whether you're a seasoned web developer or just starting, this tutorial will empower you to enhance your user interface with unique and aesthetically pleasing UI elements. Get ready to bring a touch of sophistication to your website as we dive into the art of crafting wooden toggle buttons. Let's begin the journey of creativity and code!
Source Code
Step 1 (HTML Code):
To begin, let's delve into the HTML structure required for our wooden toggle button. Follow these simple steps:
- Create the button container div.
- Add the necessary HTML elements for the toggle button.
Let's break down the code step by step:
1. <!DOCTYPE html>: This declaration specifies the HTML version being used.
2. <html lang="en">: The root element of the HTML document. The lang attribute is set to "en" for English.
3. <head>: Contains meta-information about the HTML document, such as character set, viewport settings, and links to external resources.
- <meta charset="UTF-8">: Specifies the character encoding as UTF-8.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use its latest rendering engine.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for responsive design.
- <title>Wooden Toggles Buttons</title>: Sets the title of the webpage.
- <link rel="stylesheet" href="https://codepe....">: Links an external stylesheet from CodePen.
- <link rel="stylesheet" href="styles.css">: Links an additional stylesheet from a local file named "styles.css."
4. <body>: The main content of the HTML document.
- The toggle buttons are organized inside a <div class="toggles-grid">.
- Toggle buttons are grouped within <div class="toggles-container">.
- Different types of toggle buttons are present:
- Type A toggles with simple icons.
- Type B toggles with multiple dots representing the on/off state and accompanying text.
- Type C toggles with a slider track and accompanying text.
- Type D toggles with a combined handle, displaying on/off text.
- Each toggle container consists of an <input> element with a checkbox type, a handle or track for visual representation, and optional text elements.
- SVG elements with paths define the icons used for the toggle buttons.
- The CSS styles for these toggle buttons are defined in the linked stylesheets.
- Some toggle buttons are initially set to the "checked" state using the checked attribute.
Step 2 (CSS Code):
Now, let's make our button visually appealing. Here's how:
- Apply basic styling to the container.
- Style the button background to resemble wood.
- Customize text and border properties.
Let's break down the code step by step:
1. General Styles
- Imported Google Font "Signika" with a weight of 700 for bold.
- Applied styles to the body element for overall layout and styling.
2. Toggle Style - A
- Styles for a toggle with class .toggle-container.a.
- Rounded rectangle shape with a background color transition.
- Uses a checkbox input for the toggle effect.
- Handles and icons change position and color on toggle change.
3. Toggle Style - B
- Styles for another type of toggle with class .toggle-container.b.
- A segmented handle with dots and text on the sides.
- Background color transition on toggle change.
4. Toggle Style - C
- Styles for a toggle with class .toggle-container.c.
- Utilizes radial gradients and linear gradients for background effects.
- The handle slides horizontally on toggle change.
5. Toggle Style - D
- Styles for a toggle with class .toggle-container.d.
- Background consists of linear gradients and a wood pattern.
- The handle moves horizontally with a color transition and a text transformation effect.
6. Common Toggle Components
- .toggle-input: Common styles for toggle inputs, positioned absolutely to cover the toggle area.
- .toggle-handle: Common styles for toggle handles, positioned relatively or absolutely with a wood pattern background.
- .toggle-text: Common styles for toggle text, positioned absolutely with color transition effects.
7. Transition Effects
- Transition effects are applied to various properties such as background-color, transform, color, and opacity, providing smooth animations on state changes.
8. Pseudo-classes
- Pseudo-classes like :checked are used to apply styles based on the state of the checkbox.
9. Background Images
- Wood pattern images are used as backgrounds for some toggle elements.
10. Miscellaneous
- Various CSS properties like box-shadow, border-radius, gap, and filter are used for styling and layout.
11. Responsive Design
- Flexbox is heavily used to create responsive and centered layouts.
- min-height: 100vh ensures the body takes at least the full viewport height.
@import url("https://fonts.googleapis.com/css2?family=Signika:wght@700&display=swap");
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
min-height: 100vh;
font-family: "Signika", sans-serif;
font-weight: 700;
background-color: #bbb;
}
.toggles-grid {
display: flex;
flex-direction: column;
gap: 24px;
}
.toggles-container {
display: flex;
gap: 24px;
}
.toggle-container.a {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
border-radius: 50px;
padding: 0 6px;
width: 62px;
height: 28px;
background-color: #bb5555;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.5);
transition-property: background-color;
transition-duration: 0.4s;
transition-timing-function: linear;
}
.toggle-container.a:has(:checked) {
background-color: #5698bb;
}
.toggle-container.a .toggle-input {
position: absolute;
z-index: 2;
inset: 0;
cursor: pointer;
}
.toggle-container.a .toggle-handle {
position: absolute;
z-index: 1;
top: 0;
left: 0;
border-radius: 50%;
width: 28px;
height: 28px;
background-image: url("https://assets.codepen.io/4175254/wood-pattern.png");
background-size: 328px 110px;
background-position: center;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75), inset 0 -1px 4px #b75301, 0 1px 4px rgba(0, 0, 0, 0.75);
transition-property: transform;
transition-duration: 0.4s;
}
.a .toggle-input:checked + .toggle-handle {
transform: translateX(34px);
}
.toggle-container.a .toggle-handle::before {
content: "";
position: absolute;
inset: 6.5px;
border-radius: 50%;
background-image: linear-gradient(rgba(174, 34, 1, 0.125), transparent);
box-shadow: inset 0 1px 2px #ad2201, 0 1px 1px rgba(255, 255, 255, 0.75);
}
.toggle-container.a .toggle-icon {
width: 24px;
height: 24px;
fill: #fff;
filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.25));
}
.toggle-container.b {
display: flex;
align-items: center;
position: relative;
border-radius: 5px;
width: 72px;
height: 28px;
background-color: #775b40;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.5);
transition-property: background-color;
transition-duration: 0.4s;
transition-timing-function: linear;
}
.toggle-container.b:has(:checked) {
background-color: #5698bb;
}
.toggle-container.b .toggle-input {
position: absolute;
z-index: 2;
inset: 0;
cursor: pointer;
}
.toggle-container.b .toggle-handle {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: space-between;
align-content: space-between;
position: absolute;
z-index: 1;
left: 0;
border-radius: inherit;
padding: 9px;
width: 36px;
height: 100%;
transform: translateX(-4px);
background-image: url("https://assets.codepen.io/4175254/wood-pattern.png");
background-size: 328px 110px;
background-position: center;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75), inset 0 -1px 4px #b75301, 0 1px 4px rgba(0, 0, 0, 0.75);
transition-property: transform;
transition-duration: 0.4s;
}
.b .toggle-input:checked + .toggle-handle {
transform: translateX(40px);
}
.toggle-container.b .toggle-handle-dot {
border-radius: 50%;
width: 4px;
height: 4px;
box-shadow: inset 0 1px 1px #ad2201, 0 1px 1px rgba(255, 255, 255, 0.75);
}
.toggle-container.b .toggle-text {
position: absolute;
margin-top: 1px;
font-size: 14px;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.toggle-container.b .toggle-text.off {
right: 8px;
}
.toggle-container.b .toggle-text.on {
left: 12px;
}
.toggle-container.c {
display: flex;
align-items: center;
-moz-column-gap: 16px;
column-gap: 16px;
position: relative;
}
.toggle-container.c .toggle-input {
position: absolute;
z-index: 2;
inset: 0;
cursor: pointer;
}
.toggle-container.c .toggle-text {
font-size: 14px;
color: #766f6a;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
.toggle-container.c .toggle-track-wrapper-wrapper {
display: flex;
align-items: center;
position: relative;
}
.toggle-container.c .toggle-track-wrapper {
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.75));
}
.toggle-container.c .toggle-track {
border-radius: 50px;
width: 52px;
height: 14px;
background-color: #775b40;
background-image: radial-gradient(14px 14px at 50% calc(50% + 2px), #775b40 50%, #4b3928 calc(50% + 1px)), radial-gradient(14px 14px at 50% calc(50% + 2px), #775b40 50%, #4b3928 calc(50% + 1px)), linear-gradient(rgba(0, 0, 0, 0.5) calc(50% - 2px), transparent 50%);
background-size: 14px 14px, 14px 14px, 100% 100%;
background-position: 0 0, 100% 0, 0 0;
background-repeat: no-repeat;
-webkit-mask-image: radial-gradient(14px circle, #fff 50%, transparent 0), linear-gradient(transparent 5px, #fff 5px 9px, transparent 0), radial-gradient(14px circle, #fff 50%, transparent 0);
mask-image: radial-gradient(14px circle, #fff 50%, transparent 0), linear-gradient(transparent 5px, #fff 5px 9px, transparent 0), radial-gradient(14px circle, #fff 50%, transparent 0);
-webkit-mask-size: 14px 14px, 100% 100%, 14px 14px;
mask-size: 14px 14px, 100% 100%, 14px 14px;
-webkit-mask-position: 0 0, 0 0, 100% 0;
mask-position: 0 0, 0 0, 100% 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.toggle-container.c .toggle-track::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #5698bb;
background-image: radial-gradient(14px 14px at 50% calc(50% + 2px), #5698bb 50%, #33596e calc(50% + 1px)), radial-gradient(14px 14px at 50% calc(50% + 2px), #5698bb 50%, #33596e calc(50% + 1px)), linear-gradient(rgba(0, 0, 0, 0.5) calc(50% - 2px), transparent 50%);
background-size: inherit;
background-position: inherit;
background-repeat: inherit;
-webkit-mask: inherit;
mask: inherit;
opacity: 0;
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: linear;
}
.toggle-container.c:has(:checked) .toggle-track::before {
opacity: 1;
}
.toggle-container.c .toggle-handle {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: -5px;
z-index: 1;
border-radius: 50%;
width: 24px;
height: 24px;
background-image: url("https://assets.codepen.io/4175254/wood-pattern.png");
background-size: 328px 110px;
background-position: center;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75), inset 0 -1px 4px #b75301, 0 1px 4px rgba(0, 0, 0, 0.75);
transition-property: transform;
transition-duration: 0.4s;
}
.toggle-container.c:has(:checked) .toggle-handle {
transform: translateX(35px);
}
.toggle-container.c:has(:checked) .toggle-handle::before {
background-color: #5698bb;
}
.toggle-container.c .toggle-handle::before {
content: "";
position: absolute;
border-radius: 50%;
width: 6px;
height: 6px;
background-color: #775b40;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.75);
transition-property: background-color;
transition-duration: 0.4s;
transition-timing-function: linear;
}
.toggle-container.d {
position: relative;
border-radius: 4px;
width: 76px;
height: 32px;
background-image: linear-gradient(rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0.125)), url("https://assets.codepen.io/4175254/wood-pattern.png");
background-size: 100% 100%, 328px 110px;
background-position: center;
box-shadow: inset 1px 0 1px rgba(73, 31, 1, 0.25), inset -1px 0 1px rgba(73, 31, 1, 0.25), 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.toggle-container.d .toggle-input {
position: absolute;
z-index: 2;
inset: 0;
cursor: pointer;
}
.toggle-container.d .toggle-handle {
display: flex;
align-items: center;
position: relative;
border-radius: inherit;
padding: 8px;
width: 70px;
height: inherit;
background-image: linear-gradient(90deg, rgba(73, 31, 1, 0.125), rgba(255, 255, 255, 0.25), rgba(73, 31, 1, 0.25)), url("https://assets.codepen.io/4175254/wood-pattern.png");
background-size: 200% 100%, 328px 110px;
background-position: 100% 0, center;
box-shadow: inset 0 0.5px 1px #e9d38d, inset 1px 0 1px #e9d38d;
transition-property: transform, background-position, box-shadow;
transition-duration: 0.4s;
}
.toggle-container.d:has(:checked) .toggle-handle {
transform: translateX(6px);
background-position: 0 0, center;
box-shadow: inset 0 0.5px 1px #e9d38d, inset -1px 0 1px #e9d38d;
}
.toggle-container.d .toggle-text {
position: absolute;
font-size: 14px;
color: #775b40;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
transition-property: transform, color;
transition-duration: 0.4s;
}
.toggle-container.d .toggle-text.off {
color: #ac4443;
}
.toggle-container.d:has(:checked) .off {
transform: translateX(-10%) scaleX(0.8);
color: #775b40;
}
.toggle-container.d .toggle-text.on {
right: 8px;
transform: translateX(10%) scaleX(0.8);
}
.toggle-container.d:has(:checked) .on {
transform: translateX(0) scaleX(1);
color: #5297ba;
} Final Output:
Conclusion:
Congratulations! You've successfully crafted a wooden toggle button using HTML and CSS. Experiment with variations to suit your website's unique style. Happy coding!
Code by: Nicolas Jesenberger
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: wooden toggles button, html and css, user interface design, web development, custom buttons, source code, how to create wooden toggle buttons, customizing buttons with html and css, designing ui elements, step-by-step guide for web developers, wooden buttons for websites
End of the article
