Для веб-розробника краще звести використання зображень до мінімуму, наприклад використовуючи значки для кнопок, які створені тільки за допомогою CSS. Подібних значків дуже і дуже багато, вони додаються в код CSS у вигляді шістнадцяткових значень. Ці коди для значків можна знайти в різних місцях, ось кілька місць, які були використані для створення цього уроку:
У цих списках ми змогли знайти різні коди, які можуть стати в нагоді на веб-сайті.
Тепер, коли вже вибрані відповідні символи, ми покажемо, як розмістити їх в кнопці, використовуючи тільки код CSS і псевдоклас: before для додавання вмісту до елементу класу.
створення кнопки
Для початку потрібно створити кнопку. У цьому прикладі в якості кнопки використовується звичайний прямокутник із закругленими кутами, створений за допомогою CSS3.
Скопіюйте код CSS для кнопки, розташований нижче:
Додавання псевдокласу: before
Після того, як ми створили кнопку, нам потрібно додати псевдоклас: before, щоб можна було додавати вміст кнопці.
Все, що нам потрібно зараз, - додати зовнішні і внутрішні відступи, щоб розташувати псевдоклас: before правильно.
Скопіюйте код CSS нижче для псевдокласу: before:
Тепер, щоб помістити значок на кнопку, нам потрібно додати в код CSS властивість вмісту.
Задавши властивість вмісту псевдоклас: before, ми можемо створити нові класи CSS для різних символів, які ми хочемо використовувати.
Нижче знаходяться різні значки, які здалися нам цікавими для кнопок на чистому CSS.
Кнопки з формами
Кнопка, Додати, Редагувати, Видалити, Зберегти, Лист, Хрест.
Ось кнопки, які можна використовувати для форм:
Кнопки з валютами
Якщо потрібно відобразити символи валют на кнопках:
Кнопки з температурою
Для відображення символів для температури за Цельсієм і Фаренгейтом:
Кнопки з математичними символами
Число пі, одна третина, дві третини, одна п'ята, дві п'ятих, три п'ятих, чотири п'ятих, одна шоста, п'ять шостих, одна восьма, три восьмих, п'ять восьмих, сім восьмих, чверть, половина, три чверті.
Є багато математичних символів, це ті, які здалися нам корисними:
Кнопки зі стрілками
Стрілочка вліво, стрілка вгору, стрілка вправо, стрілка вниз, стрілка вліво вгору, стрілочка вправо вгору, стрілочка вліво вниз, стрілочка вправо вниз, Далі.
Можна використовувати різні типи стрілок:
Кнопки з різними символами
Значків дуже багато, нам здалися цікавими наступні:
Подивіться на сторінці з демонстрацією роботи. як виглядають значки в браузері.