Как создать CSS Ghost Buttons

1. Примеры призрачных кнопок
2. Тенденции дизайна Ghost Button
3. Ghost Buttons Demo
4. HTML
5. CSS
6. 1. Основная Призрачная Кнопка
7. 2. Закругленные углы
8. 3. Простой эффект перехода
9. 4. Толстая граница
10. 5. Полупрозрачные исчезают
11. 6. Граница исчезает
12. 7. Полное цвет исчезает
13. 8. Размер эффекта перехода
14. Резюме

В этом году популярной тенденцией веб-дизайна является «кнопка-призрак», представляющая собой просто кнопку с рамкой и прозрачным цветом фона. Вы можете прочитать более подробные обсуждения о тенденции дизайна кнопки-призрака на SitePoint а также DesignModo ,

В этом уроке я покажу вам, как создать несколько стилей кнопок-призраков, используя CSS.

Примеры призрачных кнопок

Прежде чем мы начнем, давайте посмотрим на некоторые реальные примеры кнопок-призраков:

Мы Хекфорд

MediaMonks

VIZIO

Кроссфит Сквомиш

Icon PR

Лис Ферри

Ливси Оружие

dotsprint.co.uk

Конференция Squares

Хай и Гастингс

Децибел цифровой

Тенденции дизайна Ghost Button

Глядя на призрачные кнопки выше, мы видим некоторые общие черты между ними.

1. Фотографические фоны: Призрачные кнопки отлично смотрятся на фоне фоновых фотографий. Это позволяет пользователю видеть фоновое изображение через кнопку, что является интересным визуальным эффектом.
2. Белый - это популярный цвет кнопок- призраков: кнопки-призраки могут быть любого цвета, который вы хотите, и вы должны выбирать цвета, которые соответствуют внешнему виду вашего дизайн-проекта, но подавляющая тенденция состоит в том, чтобы дать им белую рамку и белый текст.
3. CSS-переходы: мы можем улучшить взаимодействие с нашими призрачными кнопками, используя тонкие CSS-эффекты перехода.

Ghost Buttons Demo

Я создал восемь вариаций кнопок-призраков, вдохновленных теми, которые я видел. Вы можете увидеть их все на одной странице:

Посмотреть демо

HTML

В этом уроке я использовал HTML-элемент <a> для представления кнопок-призраков.

<a class="ghost-button" href="#"> Текст кнопки-призрака </a>

CSS

Давайте пройдемся по 8 вариациям призрачных кнопок, которые я пометил как:

1. Основная призрачная кнопка
2. Закругленные углы
3. Простой эффект перехода
4. Толстая граница
5. Полупрозрачные исчезают
6. Цвет границы исчезает
7. Полное исчезновение цвета
8. Эффект перехода размера

1. Основная Призрачная Кнопка

Вот CSS, чтобы наш элемент <a> выглядел как призрачная кнопка.

.ghost-button {display: inline-block; ширина: 200 пикселей; обивка: 8px; цвет: #fff; граница: 1px solid #fff; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; }

Это основные CSS-свойства, которые заставляют призрачную кнопку выглядеть так, как она. В других вариантах нам просто нужно изменить вышеуказанные свойства или добавить новые свойства.

Должна быть визуальная индикация всякий раз, когда пользователь наводит или активирует призрачную кнопку. Чтобы достичь этого, мы создадим правила стилей для hover и активных состояний, используя псевдоклассы: hover и: active.

{background-color: #fff; цвет: # 000; }

2. Закругленные углы

Некоторые призрачные кнопки имеют закругленные углы. Это легко сделать, добавив свойство border-radius.

.ghost-button-округлено-углы {display: inline-block; ширина: 200 пикселей; обивка: 8px; цвет: #fff; граница: 1px solid #fff; радиус границы: 5 пикселей; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; } .ghost-button-округлено-углы: hover, .ghost-button-округлено-углы: активно {background-color: #fff; цвет: # 000; }

3. Простой эффект перехода

Чтобы сделать призрачную кнопку более интересной, мы можем применить тонкий эффект перехода всякий раз, когда пользователь наводит на нее курсор или щелкает по нему.

В этом варианте мы используем свойство CSS-перехода для постепенного увеличения / уменьшения границы и цвета фона кнопки-призрака.

.ghost-button-transition {display: inline-block; ширина: 200 пикселей; обивка: 8px; цвет: #fff; граница: 2px solid #fff; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; переход: фоновый цвет 0,2 с ослабление, цвет 0,2 с замедление; } .ghost-button-transition: hover, .ghost-button-transition: active { background-color: #fff; цвет: # 000; переход: фоновый цвет 0,3 с легкостью, цвет 0,3 с легкостью; }

4. Толстая граница

В некоторых случаях вам может потребоваться более толстая призрачная кнопка, чтобы она имела более визуальный вес , Все, что нам нужно сделать, чтобы достичь этого, это увеличить значение свойства border-size с 1px, скажем, до 3px.

.ghost-button-thick-border {display: inline-block; ширина: 200 пикселей; вес шрифта: полужирный; обивка: 8px; цвет: #fff; рамка: 3px solid #fff; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; переход: фоновый цвет 0,2 с ослабление, цвет 0,2 с замедление; } .ghost-button-толстая граница: hover, .ghost-button-толстая граница: активная {background-color: #fff; цвет: # 000; переход: фоновый цвет 0,3 с легкостью, цвет 0,3 с легкостью; }

5. Полупрозрачные исчезают

В этом варианте с призрачными кнопками мы разрешаем некоторым фоновым изображениям показываться через кнопку, когда пользователь наводит на нее курсор. Это приводит к интересному визуальному эффекту, особенно когда у вас есть хорошее фоновое изображение ,

Мы достигаем этого эффекта, используя функцию rgba () в правиле стиля: hover и: active. Цвет, который мы используем для фона и рамки - белый с непрозрачностью 40% , который представлен следующим образом:

RGBA (255, 255, 255, 0,4)

Однако, поскольку функция rgba () является новой функцией CSS, не все браузеры будут поддерживать ее, поэтому мы должны объявлять сплошные цвета с использованием шестнадцатеричной записи в качестве запасных.

.ghost-button-полупрозрачный {display: inline-block; ширина: 200 пикселей; обивка: 8px; цвет: #fff; граница: 2px solid #fff; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; переход: фоновый цвет 0,2 с ослабление, бордюрный цвет 0,2 с замедление; } .ghost-button-полупрозрачный: hover, .ghost-button-полупрозрачный: активный { background-color: #fff; / * отступление * / background-color: rgba (255, 255, 255, 0,4); цвет границы: #fff; / * отступление * / border-color: rgba (255, 255, 255, 0,4); переход: фоновый цвет 0,3 с легкостью, бордюрный цвет 0,3 с легкостью; }

6. Граница исчезает

Популярный эффект перехода в некоторых призрачных кнопках, с которыми я столкнулся, - это изменение цвета рамки и текста на другой цвет. Это довольно легко сделать с помощью свойства CSS-перехода.

.ghost-button-border-color {display: inline-block; ширина: 200 пикселей; обивка: 8px; цвет: #fff; граница: 2px solid #fff; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; переход: бордюр с цветом 0,3 с, цвет 0,3 с; } .ghost-button-border-color: hover, .ghost-button-border-color: active { color: # 66d8ed; цвет границы: # 66d8ed; переход: бордюр цвет 0,4 с легкостью, цвет 0,4 с легкостью; }

7. Полное цвет исчезает

Для более отчетливый Эффект перехода, мы можем исчезнуть в другом цвете для границы и фона. Опять же, мы используем свойство CSS-перехода, но на этот раз мы также изменим свойство background-color.

.ghost-button-full-color {display: inline-block; ширина: 200 пикселей; обивка: 8px; цвет: #fff; цвет фона: прозрачный; граница: 2px solid #fff; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; переход: цвет 0,3 с, фоновый цвет 0,3 с, бордюр 0,3 с; } .ghost-button-full-color: hover, .ghost-button-full-color: active { background-color: # 9363c4; цвет границы: # 9363c4; цвет: #fff; переход: цвет 0,3 с легкостью, фоновый цвет 0,3 с легкостью, бордюрный цвет 0,3 с легкостью; }

8. Размер эффекта перехода

Другой способ анимировать призрачные кнопки - увеличить их размер, когда пользователь наводит на них курсор, а затем сжимать их обратно, когда пользователь наводит курсор мыши. Мы можем добиться этого эффекта просто добавив 20px к свойствам width, height, line-height, когда пользователь наводит курсор на кнопку. Для этого эффекта перехода я чувствовал, что скорость перехода 0,3 с, которую я использовал в других вариациях, была слишком вялой, поэтому я снизил значение до 0,1 с, чтобы сделать переход быстрее.

.ghost-button-size-transition {display: inline-block; ширина: 200 пикселей; высота: 25 пикселей; высота строки: 25 пикселей; поле: 0 авто; обивка: 8px; цвет: #fff; граница: 2px solid #fff; выравнивание текста: по центру; контур: нет; текстовое оформление: нет; переход: ширина 0,3 с, высота 0,3 с, линия 0,3 см; } .ghost-button-size-transition: hover, .ghost-button-size-transition: active { ширина: 220px; высота: 45 пикселей; высота строки: 45px; переход: ширина 0,1 с, высота 0,1 с, высота строки 0,1 с; }

Резюме

Тенденция дизайна кнопки-призрака в настоящее время довольно популярна. Как вы видели, легко создавать призрачные кнопки с помощью CSS.

Исходный код демонстрационной страницы находится на GitHub, если вы хотите просмотреть его или загрузить:

Посмотреть источник на GitHub

Скачать исходник на GitHub

Связанный контент

Похожие

Комментарии