Делаем стильные кнопки

23.09.2010

Влад Мержевич

Стандартні кнопки, створені за допомогою тегу <button> або <input type="button">, виглядають добре, але спроба змінити їх вигляд через стилі призводить до жахливого результату. Кнопки стають схожими на інтерфейси десятирічної давності з їх кутовістю. Ця метаморфоза відбувається лише при використанні властивостей background і border, іншими словами, неможливо змінити колір фону кнопки та обрамлення навколо неї.

Щоб радикально змінити вигляд кнопки можна скористатися зображеннями, але порівняно з можливостями CSS 3 цей варіант зараз виглядає доморощеним.

Беручи за основу оригінальну кнопку в браузері, яка містить лінійний вертикальний градієнт і закруглені кути.

Найпростіше зробити закруглення кутів, для чого використовуємо властивість border-radius, задаючи їй необхідний радіус закруглення. Зазвичай це працює не у всіх браузерах, тому доведеться додати повний комплект. У результаті отримуємо наступне.

-moz-border-radius:  5px; /* Firefox */
-webkit-border-radius:  5px; /* Safari 4 */
border-radius:  5px; /* IE 9, Safari 5, Chrome */

Вигляд кнопок у різних браузерах показаний на рис. 2.

Загалом, все очікувано. Старі версії IE не підтримують CSS 3, інші коректно роблять необхідні мені кути. Опера, з якоїсь причини, не відображає фон за замовчуванням, як це роблять інші браузери, але про Оперу ще буде окремий розмова.

Тепер найцікавіше, робимо вертикальний лінійний градієнт. Для цього знову підуть індивідуальні стилі для кожного браузера.

Firefox

background: -moz-linear-gradient(#00BBD6, #EBFFFF);

У градієнті вказується початкова точка, кут градієнта, початковий і кінцевий колір. У нашому випадку, коли градієнт йде вертикально зверху вниз, досить задати лише кольори, інші параметри використовуються за замовчуванням.

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

Тут вказується тип градієнта (linear), початкова точка застосування градієнта (лівий верхній кут), кінцева точка (лівий нижній кут), а також початковий і кінцевий колір.

Internet Explorer

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');

Браузер IE йде своїм шляхом і для різних ефектів застосовує властивість filter, в тому числі для градієнта. Тут все тривіальніше, пишеться лише початковий і кінцевий колір градієнта.

Опера відпочиває, в ній градієнти ще не реалізовані.

Збираємо разом всі властивості для браузерів, кутів і градієнтів (приклад 1).

Приклад 1. Кнопки з лінійним градієнтом

HTML 5CSS 2.1CSS 3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Кнопки</title>
  <style type="text/css">
   button.new {
    background: -moz-linear-gradient(#00BBD6, #EBFFFF);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
    padding: 3px 7px;
    color: #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #666;
   }
  </style>
 </head> 
 <body> 
  <form action="">
  <p><button>Ісходна кнопка</button></p>
  <p><button class="new">Нова кнопка</button></p>
  </form> 
 </body> 
</html>

Отрималося досить миленько (рис. 3), але є відмінності від початкової кнопки — вона виглядає плоскою, як дошка.

Зробити кнопку потрібної форми можна знову градієнтом, "граючи" кольорами. Двома значеннями градієнта вже не обійтися, на щастя, Firefox і Safari пропонують рішення.

Firefox

background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

Замість двох значень вставляємо бажану кількість кольорів, градієнт буде плавно переходити від одного кольору до іншого.

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));

Параметр color-stop вказує точку застосування нового кольору. Значення варіюється від 0 до 1.

Приклад 2. Кнопки з удосконаленим градієнтом

HTML 5CSS 2.1CSS 3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Кнопки</title>
  <style type="text/css">
  button.new {
   background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
   background: -webkit-gradient(linear, 0 0, 0  100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
   padding: 3px 7px;
   color: #333;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   border: 1px solid #666;
  }
  </style>
 </head> 
 <body> 
  <form action="">
  <p><button>Ісходна кнопка</button></p>
  <p><button class="new">Нова кнопка</button></p>
  </form> 
 </body> 
</html>

Результат прикладу показаний на рис. 4.

Аналогічно можна створювати будь-які інші градієнти на кнопці або іншому елементі (рис. 5). Але це вже зробіть самостійно, для цього в практикум додана відповідна задача.

Підбиваю підсумки. Кнопку з градієнтом і закругленими кутами без зображень можна зробити. Проте з браузерами розбрат і коливання. Опера взагалі не вміє працювати з градієнтами, в IE 9 спостерігається неприємний баг при поєднанні градієнта з кутами.

CSS3уголкиградиент

Часті запитання