Miten luodaan: kulmakulmien painikkeet
- Previous page Text button
- Next page Back to top button
Opi, miten CSS:ää käytetään kulmakulmien painikkeiden tyylejä varten.
Miten suunnitellaan kulmakulmien painikkeiden tyylejä
Vaihe 1 - Lisää HTML:
<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>
Vaihe 2 - Lisää CSS:
Käytä rullauskaari
Ominaisuudet lisätään painikkeeseen:
.button { background-color: #04AA6D; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; } .button1 {rullauskaari: 2px;} .button2 {rullauskaari: 4px;} .button3 {rullauskaari: 8px;} .button4 {rullauskaari: 12px;} .button5 {rullauskaari: 50%;}
Related pages
Tutorial:CSS button
- Previous page Text button
- Next page Back to top button