CSS Button, Toggle Switch & Triangle Generator
Pick a button, toggle switch, triangle, or arrow, then set the theme color, corner radius, size, and hover behavior to get ready-to-paste HTML and CSS. The preview reacts to hover and clicks just like the real thing. The toggle switch is a plain checkbox plus label, so it needs no JavaScript. Generated class names start with nk- to avoid clashing with your existing styles. For finer shadow control, try the CSS Box-Shadow Generator, or the CSS Border-Radius Generator for custom corners.
🔒 Runs in your browser · Your data is never sent to a server
Preview
Hover over it to see the hover effect.
Contrast ratio (quick check)
- Normal:
- Hover:
How to use
- Choose a button, toggle switch, triangle, or arrow under "Component type".
- Set the "Theme color", then adjust the preset, "Hover effect", size, and other options.
- Hover over the preview, or click the switch, to check how it behaves.
- Use "Copy HTML" and "Copy CSS" to paste each into your own code.
Notes
- The contrast ratio is a quick calculation from the text and background colors. In a real layout, also check the surrounding background and font weight.
- Triangles use the border technique: a zero-size element whose thick borders form the shape. You cannot put text inside them or give them a background color.
- The lift effect on triangles and arrows uses the `translate` property. In older browsers they will only change color and will not lift.
- The toggle switch input is visually hidden but still reachable by keyboard. Read its state from the checked property of the `input`.
- Colors and labels are validated and escaped before they are written into the HTML and CSS. Anything other than a #RRGGBB color is replaced with the default.
Glossary
Border triangle
A technique that gives a zero-size element thick borders and makes the unwanted sides transparent, leaving the diagonal join as a triangle.
:hover
A pseudo-class applied while the pointer is over an element. On touch screens its behavior varies by device.
:focus-visible
A pseudo-class that shows an outline only when focus is set by keyboard-style interaction. Applied to the button and the toggle switch.
Contrast ratio
A value from 1 to 21 describing the luminance difference between two colors. WCAG 2.x suggests 4.5 for normal text and 3 for graphics and UI components.
FAQ
Does the toggle switch work without JavaScript?
Yes. The CSS reads the :checked state of the checkbox through the adjacent sibling selector (+) and moves the knob and changes the track color. The whole switch is wrapped in a label, so clicking anywhere on it toggles it.
How do you make a triangle with only CSS?
Give a zero-width, zero-height element thick borders and make every side except the one you want transparent. Which side carries the color depends on the direction. Pick a direction and size here to get the matching border-width and border-color values.
Will the generated CSS clash with my existing styles?
Every class name starts with nk- (nk-btn, nk-toggle, and so on), and no element selectors such as button are used. Still, check that you do not already use those names, and rename them if you do.
How is the button contrast ratio calculated?
It uses the WCAG 2.x relative luminance formula on the text and background colors, giving a ratio from 1 to 21. The text color is chosen automatically, white or a dark gray, whichever contrasts more. The soft style uses a darker shade of the same hue.
Does the hover effect work on phones?
Touch devices have no real hover, so the state may stick after a tap or never appear, depending on the device. Do not rely on hover alone to convey important information.
Share this page