Ну дуже велика кнопка в стилі 3D

33

Ну очень большая кнопка в стиле 3D

Зараз у світовому веб-дизайні по-більшій частині переважає плоский стиль оформлення інтерфейсу користувача елементів управління. Плоскі панелі навігації, блоки з утриманням і звичайно ж, невід’ємний елемент будь-якого сайту — кнопки. Я не раз вже детально розписував варіанти створення кнопок за допомогою CSS3, різних форм і забарвлень. Сьогодні хочу показати вам простий приклад створення великої об’ємної кнопки в стилі 3D.
Частіше всього у вигляді кнопок, з різних міркувань, роблять стандартні посилання, формуючи в CSS всі необхідні стилі, безпосередньо прив’язуючи їх через певний клас до тегу . У прикладі показаний фрагмент коду CSS (фрагментом), який можна застосовувати, звичайно ж, не лише до них , але і до , і іншим.

В принципі, по самому кодом особливо-то і нема чого пояснювати, все гранично просто і зрозуміло, кілька доданих універсальних властивостей, і звичайна плоска кнопка перетворюється в об’ємну. Напевно варто тільки пояснити з приводу розмірів кнопки, а розмір у нашої кнопки буде не фіксований і залежить від обраних розмірів шрифту font-size:, тобто при збільшенні або зменшенні значень розмірів шрифту, розмір кнопки буде змінюватися автоматом. Досягається це за рахунок встановлених відступів у властивості padding:.

Текст кнопки розбитий на складові з різним оформленням через тег , якому сформовані свої стилі css. В результаті ми отримуємо ось таку, ну-у дуже велику, синю кнопку, з елементами 3D в оформленні і привабливим візуальним ефектом, з допомогою псевдокласу :active, при натисканні:

Для того щоб посилання прийняла такий вигляд, достатньо до тегу додати class=”button”, текст посилання розбити тегом , всі разом в html це буде виглядати так:

<a href="#" class="button"><span class="submit">Click</span> мене<span class="submit">!</span></a>

Натисни мене!

Всі стилі формуються в CSS за допомогою властивостей класу .button. Практично для кожного властивості прописав коментарі, так що, думаю не важко буде розібратися, що, куди і навіщо. Захочете бачити кнопку іншого кольору, експериментуйте зі значеннями background-color, не забуваючи при цьому про кольорах зовнішньої тіні box-shadow. Хочете кнопку менших розмірів, змінюєте значення властивості font-size та регулюєте внутрішні відступи властивості padding, і так далі…

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

Джерело: Десь там, у буржуїнів, в хаосі сніппетів.

З повагою, Андрій.