При додаванні кнопки до веб-сторінки рекомендується використовувати CSS для створення стилю. Використання CSS є кращим методом, оскільки це більш ефективний і організований спосіб зберігати код стилю для повторного використання в декількох областях вашої сторінки або сайту. Як видно з наведеного нижче прикладу, багато атрибутів можна використовувати для керування кожним типом кнопок.

Текст CSS для оформлення кнопок

#submit {background-color: #bbb; заповнення: .5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; кордон-радіус: 6px; колір: #fff; сімейство шрифтів: 'Освальд'; розмір шрифту: 20px; текст-прикраса: немає; кордон: немає; } #submit: hover {border: none; фон: помаранчевий; коробка-тінь: 0px 0px 1px # 777; }

HTML-код для створення кнопки

Після того, як CSS буде додано на сторінку, CSS може бути застосована до будь-якої кнопки, використовуючи код у HTML.

Приклад кнопки

Приклад кнопки, створеної CSS

З наведеного вище прикладу видно, що коли миша не зависає над кнопкою, кнопка має світло-сірий фон і білий текст. Коли миша зависає над кнопкою, фон змінюється на оранжевий. Крім того, кути кнопки закруглені, а не квадратні, як стандартна кнопка форми.