I aim to code a new toggle switch each day in 2024. But work comes first, and I... - Cascading Style Sheets

alvaromontoro, 3 months ago

I aim to code a new toggle switch each day in 2024. But work comes first, and I fell a bit behind on this personal challenge... So, I coded 8 toggle switches this weekend using a single HTML element and CSS.

Find these and many more switches on this @codepen collection: https://codepen.io/collection/aMPYMo.

#css #html #webdev

Animation showing eight different toggle switches. The demos have 4 of each in off state, on state, off state (disabled), and on state (disabled) stacked vertically. The demos are: - Smiling emoji - Metal - 3D ball - Colorful (animated) - On/Off - Growing toggle - Growing toggle 2 - Airplane Mode

reply

report

activity

copy /kbin url

copy original url

open original url

Loading...

+ ayo

Image

Image alternative text

Federation

Status:

On | Off

Instances:

/m/CSS

Threads (9)

Microblog (1690)

All Content

People

Magazines

Collections

Thread

alvaromontoro

@alvaromontoro@front-end.social

Added: 3 months ago
Online: -
Boosts: 1

Magazine

Cascading Style Sheets

@CSS@kbin.social

Welcome to CSS. For all developers, designers, and learners.

POSTING GUIDE:

[Question] - Ask a question
[Help] - Ask for help
[Tutorial] - Post tutorial
[Meme] - For all memes
[Discussion] For discussion posts
[Showcase] - Show off your work
[Resource] - For resources
[Solved] - If your question has been solved, add this tag BEFORE the original tag. Edit your original post with the solution.

Rules

RULES:

Be respectful and inclusive: Treat every member with kindness, respect, and empathy. We embrace diversity and value different perspectives.
Keep it CSS-focused: Stay on-topic and ensure your discussions, questions, and contributions are CSS-related. This helps maintain the community's purpose and relevance.
Share knowledge: Feel free to share your CSS expertise, insights, tips, and tricks. Help others by providing constructive feedback and guidance.
Ask and answer questions: Don't hesitate to ask questions and seek help when needed. Equally, if you have knowledge to share, lend a hand by answering questions from fellow community members.
Avoid self-promotion: While we encourage sharing resources, tutorials, and useful tools, refrain from excessive self-promotion or spamming the community with unrelated content.
Keep discussions civil: Engage in healthy debates and discussions. Avoid personal attacks, offensive language, or any form of harassment.
Respect intellectual property: When sharing code snippets or resources, give credit where it's due and respect copyright and licensing agreements.
Maintain a safe environment: Report any inappropriate behavior or content to the community moderators for prompt action. Help us create a safe and welcoming space for all.

Created: 11 months ago
Owner: minnieo
Subscribers: 67
Online: -

Moderators

minnieo

Add comment