Generate real HTML and CSS for a described button, with every CSS property explained in plain English next to the line that uses it.
You are a front-end tutor who never hands over CSS without saying what each property actually does to the button on screen, because copying code you don't understand teaches nothing. My button description is [BUTTON_DESCRIPTION], written in plain language, such as a rounded blue button that turns darker on hover, or a pill-shaped outline button with an icon on the left. If I left that blank, ask me to describe one instead of inventing a generic button in its place. My experience level is [LEVEL:select:first time writing CSS,know the basics but want the explanation anyway]. Regardless of which I pick, write real, valid HTML for the button element and a matching CSS class, never inline styles, since inline styles teach a habit that breaks the moment a second button needs the same style. After the code, walk through the CSS line by line in the order it appears, and for each property state what it controls, what unit or value type it expects, and what would visually change if the value changed, tied to the specific button I described, not a generic definition. If I chose first time writing CSS, also explain what a CSS class selector is and how the class in the HTML connects to the block in the CSS. If I chose know the basics, skip that connection and focus each line's explanation on the specific value choice, such as why 8px was picked over a percentage for the border radius given what I described. Cover the hover state as its own separate explained block if my description implies one, using the pseudo-class selector for hover state, and explain that a pseudo-class is a state-based selector rather than assuming that term is already familiar. If my description implies a behavior CSS alone cannot fully deliver, such as a click animation with a delay or text that changes on click, say so plainly, give the CSS transition property that gets closest, and name that JavaScript is required for the rest instead of faking it with CSS. If I ask for a variation afterward, such as making the same button smaller or changing its color scheme, apply only the requested change to the existing code and explanation instead of rebuilding the whole button from scratch.
Use this prompt anywhere
10,000+ expert prompts for ChatGPT, Claude, Gemini, and wherever you use AI.
Get Early AccessMost CSS generators hand over a code block and stop there, which teaches copy-pasting instead of CSS. This one builds the button you describe, then explains every property in the code against that specific button, not a textbook definition disconnected from what you're actually building.
Describe the button in [BUTTON_DESCRIPTION], a rounded blue button that darkens on hover, a pill-shaped outline button with a left icon, anything, and set [LEVEL] to match how much CSS you already know. First-timers get the class selector connection between the HTML and CSS spelled out. Anyone past that skips straight to why each specific value was chosen. Hover states get their own explained block, and if the description needs real interactivity CSS can't deliver, the output says so instead of faking it.
Build one button, understand it fully, then apply the same properties to the next one yourself. Once buttons make sense, move into full page structure with the CSS layout practice generator, or see the same styling done with utility classes instead of custom CSS in the Tailwind class explainer.
Build it in the Dock Editor and keep every button and its explanation in one running reference as you learn.
Working from the Dock Editor or from ChatGPT, Claude, or Gemini, fill in [BUTTON_DESCRIPTION] in plain language, color, shape, hover behavior, anything you can picture, no CSS terms required.
Choose [LEVEL] as first time writing CSS for the fully spelled-out version, or know the basics for a faster, value-focused explanation.
The output gives real HTML with a proper class, not inline styles, and a matching CSS block you can paste straight into a stylesheet.
Each CSS property is explained against the button you described, what it controls, what changes if the value changes, and why that value fit your description.
Request a size, color, or shape change afterward and only that piece updates, keeping the rest of the code and explanation intact.
Build a single button and actually understand every line before moving on, instead of collecting code snippets that work for reasons you can't explain.
Generate the exact button a project spec calls for, then use the explanation to answer questions about it correctly in class or during review.
Get a real, working button styled to match a personal site's look, with enough explanation to tweak the color or shape later without starting over.
Revisit box model and pseudo-class basics through a concrete example instead of rereading lecture slides that never quite stuck.
Discover more prompts that could help with your workflow.
Build a small working program that calls a real public API, with the request, response, and API key setup explained step by step.
Explain a core functional programming idea, such as pure functions or immutability, with a broken code example and its fixed version shown side by side.
Explain a built-in math function, square root, power, absolute value, or rounding, covering math and syntax, then generate practice calls to predict before revealing results.
10,000+ expert-curated prompts for ChatGPT, Claude, Gemini, and wherever you use AI. Our extension helps any prompt deliver better results.