For Science (How model Thinking example)
Create an HTML webpage with a button in the center that changes the background color to a random one.
The previous solution used JavaScript. The user wants a version without JavaScript (even if it's less appealing or lacks effects).
HTML and CSS only.
HTML/CSS are declarative/styling languages. They cannot generate "random" values on the fly.
To change a state (like a color) without JavaScript, I need a way to store state in the DOM.
Common techniques for "no-JS" state:
Checkboxes/Radio buttons with the :checked pseudo-class.
The :target pseudo-class (using URL fragments).
Hover effects (not a click).
Active state (only while held down).
Option A: Radio Buttons. I can create a list of hidden radio buttons. Each radio button, when checked, triggers a change in the parent or a sibling using the general sibling combinator (~).
Option B: The :target trick. I can have several IDs. Clicking a link to #color1 changes the style of that element.
Option C: Checkboxes. Similar to radio buttons.
Since a "random" color is impossible without logic (JS), I have to provide a set of colors.
To make it feel like a "button" that changes the color, I can use a series of radio buttons.
Wait, a single button that cycles through random colors without JS is technically impossible because HTML/CSS has no memory of "which color was last" or a "random" function.
Alternative: Use a "Cycle" approach. Use a hidden set of radio buttons and a label that looks like a button.
Better approach for "Random-ish" feeling: A group of labels/buttons that each trigger a different color. But the user asked for a button (singular) in the center.
The "Radio Cycle" Hack: I can overlap several labels (buttons) or use a checkbox. Actually, the best "no-JS" way to change a background on click is using hidden radio buttons and the CSS :checked selector. However, to make it one button that keeps changing, I'd need a very complex CSS setup or just accept that it's a set of buttons.
Correction: The user said "a button" (singular). Without JS, a single button cannot change the background to a random color because there is no logic to pick a random number or update the state permanently.
Workaround: I can create a few "invisible" radio buttons. Using a label, I can trigger them. But that's usually more than one button.
The :target method: You click a link, the URL changes to #red, and the CSS body:target changes the color. But body cannot be targeted this way easily. I can target a container.
The "Checkbox Hack": I can have one checkbox. Checked = Color A, Unchecked = Color B. That's only 2 colors.
The "Radio Button Gallery" approach: Create a few buttons. Each one changes the background. This is the most honest "CSS-only" way to do multiple colors.
Wait, can I do a "random" feel? I can't. But I can create a "button" that is actually a label for a radio button. If I have 5 radio buttons, I can make it so that clicking "Next" cycles through them? No, CSS can't "cycle" to the next index.
Most effective CSS-only solution for a "change color" effect:
Use a set of radio buttons. To make it look like "one button" is hard, but I can make a small group of buttons, or one button that toggles between a few colors using the :checked state of a hidden checkbox (though that's only 2 colors).
Actually, there is a way to do a "random" feel using a very long CSS animation that cycles through colors, and the "button" just starts/stops it? No, that's not clicking.
Let's be honest with the user: CSS alone cannot generate random numbers or handle "click to change to random" logic because CSS is for styling, not logic.
However, I can offer the "Radio Button Hack". I'll provide a set of buttons that change the background. Since the user wants "a button" in the center, I'll explain that without JS, we can't do "random," but we can do "pre-set" colors using hidden inputs.
Wait! I can use a set of radio buttons and labels. If I stack the labels on top of each other or use a specific layout, I can make them act as a color picker. But the most user-friendly "no-JS" version is a few buttons that each set a specific color.
Let's try the "Checkbox Hack" for a toggle (2 colors).
Let's try "Radio Buttons" for multiple colors.
Refined Plan:
Explain that "Randomness" requires logic (JavaScript). HTML/CSS cannot "think" or "pick a random number."
Provide a solution using Radio Buttons. I will create 5-6 hidden radio buttons. I will create labels that look like buttons. To keep it "centered" and looking like "a button," I'll group them.
Alternative: A single checkbox that toggles between two colors.
Better Idea: Use a set of labels. Since I can't make one button change to a random color, I'll give them a "Color Palette" of buttons in the center.
Wait, there is a "Target" trick:
Red
#red:target { background: red; }
But this requires the target to be an element. If the target is the background, we can use a full-screen div.
Let's go with the Radio Button method. It's the most robust.
I will create 5 radio buttons.
The CSS will use input[id="color1"]:checked ~ .container { background: red; }.
Wait, the user specifically asked for "a button" (singular).
If I use a checkbox, I can only have two states (on/off).
If I want "random" (or multiple), I need multiple inputs.
Let's provide a "Toggle" (Checkbox) version (simplest) and a "Selection" (Radio) version. I'll explain the limitation clearly.
Actually, I can make a "Random" feel by having a very fast CSS animation and a button that "stops" it? No, that requires JS to stop the animation.
Decision: I will explain that CSS is for styling and JS is for logic. I will provide a "CSS-only" version using Radio Buttons. To make it look like "a button" in the center, I'll put a few colorful buttons in a small group.
Self-Correction: To truly satisfy the "one button" request without JS, the only thing possible is a toggle (2 colors). I'll provide a version that uses a hidden checkbox to switch between two colors. It's the closest thing to a single button changing a state.
Alternative "No-JS" approach:
Using the :active pseudo-class. While you hold the button, the color changes. But it reverts when you let go.
Let's go with the Radio Button approach but style them as a "Menu" of colors. No, the user wants "a button."
The most clever "No-JS" way to do multiple colors with one click area:
You can't. Not with a single click. You need a way to change the state of the DOM.
Let's provide the "Checkbox Toggle" (2 colors). It's the only way to have one button that changes the background and stays that way.
Wait! There is a trick using the :focus or :active state, but that's temporary.
Let's be transparent:
"True randomness" and "state management" (remembering the current color to change to a new one) are the core functions of JavaScript. CSS cannot do this.
However, I can give you a version that uses a hidden checkbox. This allows one button to toggle the background between two colors.
Let's try one more thing: Can I use a CSS animation that cycles through colors and a "button" that just... no.
Let's provide the Checkbox Toggle. It's the most honest implementation of "one button, no JS, changes background."
Wait, I can do a "Multiple Color" version using Radio buttons and Labels, but the labels would have to be separate buttons. I'll offer both: a Toggle (1 button, 2 colors) and a Palette (Multiple buttons, Multiple colors).
Actually, I'll do the "Radio Button" method but style the labels to look like a single "Switch" or "Gallery".
Let's stick to the simplest "No JS" interpretation: Use a hidden checkbox.
Button -> Label for Checkbox.
Checkbox:checked -> Body background changes.
Can we do more than 2 colors?
Not with one button. To change to 3 colors, you need 2 binary states (bits). CSS can't do that with one element.
Final Plan:
Explain that CSS is for style and JS is for behavior/logic.
Explain that "Randomness" is a logical operation, so it's impossible in pure CSS.
Provide a "Toggle" version: One button, two colors (using a hidden checkbox).
Provide a "Palette" version: Multiple buttons, multiple colors (using radio buttons).
I'll present the Toggle version as the primary answer since they asked for "a button".
Wait, I have a better idea for the "one button" feel.
I can use a set of radio buttons and labels, but I can't make one label trigger different radios.
So, I will provide the Checkbox Toggle. It's clean, uses no JS, and fits the "one button" requirement perfectly.
Code Structure for Checkbox Toggle:
Input (type=checkbox, hidden)
Label (styled as button, linked to input)
Use the :checked pseudo-class and the ~ (sibling selector) to change the background of a wrapper div. (Note: You can't change the body background using a sibling selector because the input is inside the body. I'll have to use a full-screen div as the background).
Drafting the code: