Gratis CSS-knopgenerator

Erstellen Sie ansprechende, responsive Schaltflächen für Ihre Website. Wählen Sie aus über 70 vorgefertigten Stilen oder passen Sie Ihre eigenen mit unseren erweiterten Steuerelementen an.

Knop voorbeeld

Gegenereerde CSS

.custom-button { padding: 0.75rem 1.5rem; border-radius: 0.5rem; background: #165DFF; color: white; font-weight: 500; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; }  .custom-button:hover { background: rgba(22, 93, 255, 0.9); transform: translateY(-2px); }  .custom-button:focus { outline: none; box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.3), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }  .custom-button:active { transform: translateY(0); }

Eigenschappen van de knop

Knop Tekst

Size

Shape

Color

Populaire voorinstellingen

Related Tools

Creëer perfecte Flexbox-lay-outs

Visualiseer, pas aan en genereer CSS-flexboxcode met onze intuïtieve interface voor slepen en neerzetten.

Stylus naar CSS Converter

Transformeer uw SCSS-code in CSS. Snel, gemakkelijk en veilig.

SCSS naar CSS Converter

Transformeer uw SCSS-code in CSS. Snel, gemakkelijk en veilig.

Aangepaste disclaimers maken

Genereer uitgebreide disclaimers die zijn afgestemd op uw website, app of service.

Huidige Converter

Zet elektrische stroom met precisie en gemak om tussen verschillende eenheden

Kansrekening

Bereken kansen voor verschillende scenario's met onze uitgebreide kansrekening.