Hoe te maken: ronde knoppen

Hoe de stijl van ronde knoppen te ontwerpen

Stap 1 - Voeg HTML toe:

<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

Stap 2 - Voeg CSS toe:

Gebruik radius-kant Eigenschappen toevoegen aan knoppen om ronde hoeken toe te voegen:

.button {
  achtergrondkleur: #04AA6D;
  rand: none;
  kleur: wit;
  vulling: 20px;
  tekstuitlijning: midden;
  tekstdecoratie: none;
  weergave: inline-blok;
  lettergrootte: 16px;
  marge: 4px 2px;
}
.button1 {radius-kant: 2px;}
.button2 {radius-kant: 4px;}
.button3 {radius-kant: 8px;}
.button4 {radius-kant: 12px;}
.button5 {radius-kant: 50%;}

Try it yourself

Related pages

Tutorial:CSS button