Содержание
простые примеры кода для новичков
Приветствую всех читающих эту публикацию, а также моих горячо любимых подписчиков! Сегодня я хочу рассказать вам об одном модном и симпатичном объекте, который можно встретить на страницах интернет-магазинов знаменитых брендов. А теперь внимание! Я покажу, как создается прозрачная кнопка css свойствами.
Данная статья окунет вас в историю создания такого вида кнопок, обучит, как сделать такой элемент собственноручно, и после вы сможете уверенно использовать на своих веб-сервисах стильную кнопочку. Думаю, пора переходить к делу!
А вот и прародитель дизайна!
Не удивительно, что в мире веб-программирования трудно запечатлеть в истории всех создателей каких-то элементов дизайна. Однако с данной кнопкой все иначе. Первый онлайн-ресурс, который использовал «призрачную кнопку» стал Tumblr. После дебюта на таком знаменитом сайте дизайн начал взлетать по ступенькам популярности.
Следующей его использовала компания Apple для представления кнопок в интерфейсах браузера Safari и операционной системы iOS. По сути именно благодаря Apple прозрачные объекты стали модными. На сегодняшний день все прибыльные коммерческие сервисы используют данную технологию.
Особенности «кнопки призрака»
Из-за своего внешнего вида полупрозрачный button стали называть «кнопкой призраком». И действительно, особенностями такого объекта являются:
- Тонкая контурная линия;
- Преобладание черно-белой палитры цветов;
- Прозрачный фон;
- Масштаб больше стандартного.
Вроде бы ничего необычного и сверхнового в этой технологии нет. Однако она произвела фурор и идеально сочетается с трендом минимализма. Ниже я прикрепил таблицу, в которой перечислены позитивные и негативные стороны «кнопки призрака».
Плюсы | Минусы |
· Использование минимального количества css-свойств, украшений и отвлекающих анимаций; · Простота и лаконичность;
· Отлично привлекает внимание пользователей при правильном использовании; · Не отвлекает от важного контента. | · При неумелом использовании может стать незаметной на ярком фоне; · В некоторых случаях пользователь может быть дезориентирован. |
Пример прозрачной кнопки
Вот теперь займемся непосредственно созданием топового объекта. Для примера я сверстал простую главную страничку интернет-магазина брендовой одежды, которая сообщает о сезонных скидках.
Не волнуйтесь, в программном коде нет ничего сложного. Все это мы уже разбирали в предыдущих публикациях. На сайте создано две прозрачные кнопки с плавным эффектом перехода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset=utf-8" /> <title>Пример сайта с призрачной кнопкой</title> <style type="text/css"> BODY { background: url(https://modoza.ru/mail_images/menu/rasprodazha-menu.png) no-repeat; background-size:100% } a.b-ghost { display: block; margin-top:45px; width: 350px; padding: 15px; color: #1C1C1C; font-weight: bold; font-family: Arial Unicode MS, sans-serif; border: 3px solid #363636; text-align: center; outline: 1px solid #828282; text-decoration: none; transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out; } .b-ghost:hover,.b-ghost:active { background-color: #363636; border: 3px solid #CFCFCF; color: #CFCFCF; transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out; } </style> </head> <body> <div > <a href="#">Мужская одежда</a> <a href="#">Женская одежда</a> </div> </body> </html> |
<!DOCTYPE html> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta charset=utf-8″ /> <title>Пример сайта с призрачной кнопкой</title> <style type=»text/css»> BODY { background: url(https://modoza.ru/mail_images/menu/rasprodazha-menu.png) no-repeat; background-size:100% } a.b-ghost { display: block; margin-top:45px; width: 350px; padding: 15px; color: #1C1C1C; font-weight: bold; font-family: Arial Unicode MS, sans-serif; border: 3px solid #363636; text-align: center; outline: 1px solid #828282; text-decoration: none; transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out; } .b-ghost:hover,.b-ghost:active { background-color: #363636; border: 3px solid #CFCFCF; color: #CFCFCF; transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out; } </style> </head> <body> <div > <a href=»#»>Мужская одежда</a> <a href=»#»>Женская одежда</a> </div> </body> </html>
Надеюсь статья вооружила вас новыми знаниями и была полезной. А вы не забывайте, что я с нетерпением жду ваших заявок на подписку! И конечно же делитесь ссылкой на мой блог со своими коллегами и друзьями.
Пока-пока!
С уважением, Роман Чуешов
Прочитано: 731 раз
Кнопки с анимацией CSS svg
Кнопки с анимацией CSS svg
ключевые слова
- анимация
- кнопка
- Css3
- html
- апельсин
- красный
- svg
- Кнопки
- с
- анимацией
- CSS
DMCA Contact Us
бесплатная загрузка ( svg, 456.63KB )
Связанная векторная графика
Мультяшная анимация Микки Мауса Диснея eps
Кнопки Metro для Windows 8 в CSS svg
Стеклянные кнопки eps ai
Вектор кнопки eps ai
Анимация бегущего ребенка eps
Кнопка питания psd
Значок кнопки с булавкой, Mockup Free PSD psd
Яркие векторные кнопки градиента eps
Кнопка переключения eps ai
Кнопка питания psd
Кнопка социальных сетей svg ai
Круглая прозрачная кнопка (PSD) psd
Стеклянные кнопки векторов ai
Кнопка вектора текстуры окантовки металла eps
Light UI Kit в CSS и HTML psd
Комплект Surface UI CSS svg
На металлической кнопке eps
Векторные кнопки стеклянный шар ai eps
Файл эскиза современной кнопки питания psd sketch
Кнопки социальных сетей psd
Глянцевое веб-меню и кнопка eps ai
31 бесплатная кнопка psd
Нажать на кнопку psd
Деревянная кнопка psd
Стеклянные кнопки psd
Кнопки пользовательского интерфейса psd
Моя учетная запись PSD и CSS интерфейс psd
Схема организации с кнопкой svg eps
Панель Twitter (HTML CSS + PSD) psd
AI первая анимация красоты ai
Кнопка переключения psd
Кнопка громкости ai
Веб-кнопки Веб ai
Значок кнопки шаблона решетки динамика eps ai svg
Круглая золотая кнопка Векторный набор ai
Кнопки светофора Yosemite psd
Анимация животных ai
Кнопка PSD дизайн баннера веб-сайта psd
Бесплатные векторные линейные градиенты CSS eps
Кнопка загрузки psd
Кнопки Like psd
Кнопка питания psd
Кнопка psd
Красочные стеклянные кнопки веб вектор eps
Блестящая кнопка и веб-этикетки вектор eps
Прозрачные кнопки векторов ai
Комплект элементов веб-интерфейса BootFlat CSS / PSD psd svg ico
10 Кнопка ai
Флажок CSS svg
Кнопка питания ai eps
Загрузи больше
- Contact Us
Кнопки · Bootstrap на русском
Используйте Bootstrap пользовательские стили кнопок для действий в формы, диалоговые окна и многое другое. Включает поддержку для нескольких контекстуальных вариаций, размеров, состояния и более.
Содержание
Примеры
Bootstrap включает в себя шесть предустановленных стилей кнопок, каждая из которых обслуживает свое собственное смысловое назначение.
Primary
Secondary
Success
Info
Warning
Danger
Link
<!-- Обеспечивает дополнительный визуальный вес и определяет основное действие в кнопки -->
<button type="button">Primary</button>
<!-- Вторичное, кнопка контур -->
<button type="button">Secondary</button>
<!-- Указывает на успешное или позитивное действие -->
<button type="button">Success</button>
<!-- Контекстную кнопку на информационные сообщения -->
<button type="button">Info</button>
<!-- Указывает, следует проявлять осторожность с этим действием -->
<button type="button">Warning</button>
<!-- Указывает на опасное или потенциально негативное действие -->
<button type="button">Danger</button>
<!-- Кнопки соединяются, делая его похожим на ссылку сохраняя поведение кнопки -->
<button type="button">Link</button>
Передать смысл для ассистивных технологий
Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only
класс.
В .btn
классы предназначены для использования с <button>
элемент. Однако, вы также можете использовать эти классы на <a>
или <input>
элементов (хотя некоторые браузеры могут применять несколько разных перевода).
При нажатии кнопки-классы на <a>
элементов, которые используются для запуска в разделе функции (например, сворачивание содержимого), а не ссылок на новые страницы или разделы в рамках текущей страницы, эти ссылки следует давать role="button"
, чтобы правильно донести свои цели для вспомогательных технологий, таких как программы чтения с экрана.
<a href="#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
Контурные кнопки
Нужна кнопка, но не дюже цвета фона они приносят? Заменить по умолчанию модификатор классов с .btn-outline-*
, чтобы удалить все фоновые изображения и цвета на любую кнопку.
Primary
Secondary
Success
Info
Warning
Danger
<button type="button">Primary</button>
<button type="button">Secondary</button>
<button type="button">Success</button>
<button type="button">Info</button>
<button type="button">Warning</button>
<button type="button">Danger</button>
Размеры
Необычные большие или меньшие кнопки? Добавить .btn-lg
или .btn-sm
дополнительные размеры.
Large button
Large button
<button type="button">Large button</button>
<button type="button">Large button</button>
Small button
Small button
<button type="button">Small button</button>
<button type="button">Small button</button>
Создать кнопки—те на уровне блоков, которые охватывают всю ширину родителя—путем добавления .btn-block
.
Block level button
Block level button
<button type="button">Block level button</button>
<button type="button">Block level button</button>
Активное состояние
Кнопок будет нажата (на темном фоне, темные границы, и вставка тень) когда активный. Там нет необходимости, чтобы добавить класс в <button>
, так как они используют псевдо-класса. Тем не менее, вы все равно можете заставить же активное появление с .active
(и включают в себя aria-pressed="true"
атрибут) если Вам необходимо скопировать состояние программно.
<a href="#" role="button" aria-pressed="true">Primary link</a>
<a href="#" role="button" aria-pressed="true">Link</a>
Неактивное состояние
Сделайте кнопки которые выглядят не активно, добавив disabled
логический атрибут к любому <button>
элементу.
Внимание! IE9 и ниже отрисовка кнопок отключен с серым, тени текста, который мы не можем обойти.
Primary button
Button
<button type="button" disabled>Primary button</button>
<button type="button" disabled>Button</button>
Кнопки отключить с помощью <a>
элемент вести себя немного по-другому:
<a>
не поддерживаютdisabled
атрибут, так что вы должны добавить.disabled
класса, чтобы сделать его визуально отключены.- Некоторые будущие чистые стили, чтобы отключить все
pointer-events
на кнопки якорь. В браузерах, которые поддерживают это свойство, Вы не увидите курсор отключен вообще. - Кнопок отключен должен содержать
aria-disabled="true"
атрибут указать состояние элемента для вспомогательных технологий.
<a href="#" role="button" aria-disabled="true">Primary link</a>
<a href="#" role="button" aria-disabled="true">Link</a>
Ссылка функционального пояснения
.disabled
класса pointer-events: none
попробовать отключить функциональность ссылке из <a>
, но что CSS собственность еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают pointer-events: none
, навигация с помощью клавиатуры остается в силе, это означает, что зрячие пользователи клавиатуры и пользователи технологий будут по-прежнему сможете активировать эти ссылки. Так, чтобы быть безопасным, добавить tabindex="-1"
атрибут по этим ссылкам, (чтобы предотвратить их от получать фокус клавиатуры) и использовать настраиваемые JavaScript отключить их функциональность.
Плагин кнопки
Делать больше с кнопками. Кнопки управления состояния или создавайте группы кнопок дополнительные компоненты, такие как панели инструментов.
Тумблер состояния
Добавить data-toggle="button"
для включения кнопки active
состояние. Если вы заранее переключить кнопку, Вы должны вручную добавить .active
класс и aria-pressed="true"
на <button>
.
Single toggle
<button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
Флажки и радиокнопки
Bootstrap .button
стили могут быть применены и другие элементы, такие как <label>
, чтобы обеспечить флажок или радио стиль кнопки переключения. Добавить data-toggle="buttons"
на .btn-group
, содержащая измененные кнопки для включения переключения в соответствующих стилях.
Проверенные состояние этих кнопок обновлять только через click
событие на кнопку. Если вы используете другой метод обновления входного сигнала, например, с <input type="reset">
или вручную, применяя входа checked
собственность—вы нужно переключить .active
на <label>
вручную.
Обратите внимание, что предварительно проверил кнопки необходимо вручную добавить .active
класс к входа <label>
.
<div data-toggle="buttons">
<label>
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label>
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label>
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<div data-toggle="buttons">
<label>
<input type="radio" name="options" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label>
<input type="radio" name="options" autocomplete="off"> Radio 2
</label>
<label>
<input type="radio" name="options" autocomplete="off"> Radio 3
</label>
</div>
Методы
Способ | Описание |
---|---|
$().button('toggle') | Переключение нажимаем состояние. Дает кнопка видимость того, что он был активирован. |
Цвет кнопки на сайте: почему важно выбрать правильный
Из этого материала вы узнаете:
Каким сделать цвет кнопки на сайте, чтобы увеличить конверсию? На первый взгляд вопрос может показаться странным, но это далеко не так. От того, выполнит посетитель ресурса ожидаемое от него действие или нет, зависит слишком многое — а потому маркетологи цепляются буквально за любую возможность убедить людей принять верное решение.
Значимую роль в данном случае играет множество факторов: и расположение заветной кнопки, и сопровождающая ее надпись, и, разумеется, цвет. Однако не надо думать, что стоит выделить клавишу призыва к действию кислотно-красным, и человек автоматически ее нажмет. Люди — не собаки Павлова. И подход тут нужен совершенно другой.
Что такое кнопка призыва к действию
Люди, как правило, заходят на сайты с какой-то определенной целью. Для ее достижения необходимо выполнить ряд действий, первое из которых — нажатие на кнопку call to action.
Например, пользователь хочет зарегистрироваться на сайте, загрузить приложение на телефон или же купить что-то в интернет-магазине. Практически во всех случаях он прежде нажимает на кнопку призыва к действию.
Основная задача такой кнопки — повысить конверсию сайта, направляя пользователей к нужному действию и конвертируя их в клиентов. Вот характерные примеры CTA:
- «Установите приложение».
- «Скачайте книгу или инструкцию».
- «Оформите подписку на обновления».
- «Нажмите для получения консультации».
Стоит заметить, что чаще всего вместо кнопок используются ссылки. Если первые являются, по сути, изображениями на сайте и для их создания необходимо приложить определенные усилия, то вторые создаются за мгновение. Задачи при этом у тех и других абсолютно идентичные.
Возникает вопрос, когда следует использовать кнопки, а где достаточно гиперссылки. Большое количество CTA-кнопок на сайте замедляет загрузку страницы, а также может запутать пользователя, который теряется и не знает, куда лучше нажать. Поэтому данные элементы нужно внедрять лишь для призыва посетителя к важному действию: оформлению заказа, загрузке файла, подписке на рассылку или регистрации на ресурсе. Для всех остальных задач смело пользуйтесь обычными ссылками.
В идеале кнопка CTA не отвлекает посетителя и органично вписывается в дизайн страницы. Цвет кнопки на сайте и ее оформление нужно сделать таким образом, чтобы пользователь взаимодействовал с этим элементом на бессознательном уровне, не оценивая его внешний вид.
Подходящие места на сайте для кнопки призыва к действию
Главная страница
При первом посещении интернет-магазина посетитель, вероятно, заинтересуется качеством сервиса данной площадки. Пока речь о покупке какого-то товара не идет, нужно произвести на пользователя приятное впечатление, получив от него при этом контактные данные. Сделать это можно через форму подписки.
Страница с категориями товаров
Пользователь на данном этапе хочет ознакомиться с представленным ассортиментом, изучить характеристики позиций, сравнить их по цене, чтобы затем определиться и выбрать что-то одно. В частности, ему интересны предлагаемые скидки или выгодные акции в определенном товарном сегменте. Привлечь внимание пользователя можно кнопкой «Купить» с изображением продуктовой корзины.
Карточка продукта
Здесь потенциальный клиент уже выбрал искомый товар или услугу, и теперь ему нужны более детальная характеристика, фотографии продукта, условия оплаты и доставки, информация о наличии данной позиции на складе. Пользователя в данном случае можно заинтересовать уникальным предложением, включив для дополнительной мотивации обратный счетчик, если по данному товару имеется ограниченная акция. На этом этапе важно убедить клиента, не перегружая его лишней информацией.
Корзина
Это заключительный этап воронки продаж, поэтому здесь уже не нужно отвлекать покупателя никакими дополнительными предложениями. Должна быть только необходимая информация для оформления заказа: характеристика товара, форма оплаты и условия доставки. В противном случае посетитель может растеряться и отправиться за поиском конкретики в другое место, так и не завершив покупку.
Запись в блоге
Как правило, блог посещают для получения информации, а не для покупки товара или заказа услуги. Поэтому публикацией статей нужно мотивировать читателей хотя бы подписаться на рассылку. А им легче всего это сделать, нажав на ту же CTA-кнопку.
Пост в социальной сети
Сегодня многие интернет-магазины предпочитают продвигать свою продукцию в основном через социальные сети. Не следует перегружать паблик рекламными публикациями, призывающими к действию. Но время от времени такие посты должны публиковаться, и кнопка для подписки на данную страницу будет здесь весьма кстати.
Посадочная страница
Лендинг демонстрирует преимущества продукта, а также отвечает на возникающие у посетителей вопросы. Здесь ключевую роль играет правильный порядок подачи информации, в том числе грамотное размещение кнопок CTA в достаточном, не слишком большом количестве.
Общие правила цветового оформления кнопки призыва к действию на сайте
Значительную часть информации человек получает через зрение. Этим объясняется стремление владельцев продающих сайтов сделать свои ресурсы максимально привлекательными и показать товар или услугу в наиболее выгодных ракурсах, создавая подходящий зрительный образ.
Но какими бы красочными ни были фотографии продукта, рядом должна быть кнопка, эффективно призывающая к заказу. Если ее цвет не привлекает внимания, посетитель не нажмет на нее и не станет вашим клиентом.
Создать эту кнопку, лишь следуя гармоничности оформления и сохранению дизайна, недостаточно. Есть большая вероятность, что данный элемент останется незамеченным. Посетитель, не увидев предложения купить товар, просто покинет сайт.
Чтобы функция призыва к действию работала, цвет кнопки на сайте обязан отвечать следующим требованиям:
- Оттенки не должны быть слишком темными и тусклыми.
- Лучше избегать использования серого цвета. Кнопка в таком случае будет восприниматься как неактивная, не вызывающая желания на нее нажимать.
- Тени и градиенты в оформлении следует использовать с осторожностью. Например, эффект вогнутости объемного элемента будет восприниматься посетителями как нажатая, а значит, неактивная кнопка. Поэтому она должна выглядеть либо изначально выпуклой, либо плоской и однотонной.
- Лучше не обрамлять кнопку простой рамкой. Она делает элемент плохо заметным и не призывающим к действию.
Сегодня принято считать, что контрастность элемента на фоне страницы имеет большее значение, нежели цвет. По этой причине качественные руководства рекомендуют делать кнопку более контрастной, в то время как рассуждения по поводу правильного подбора цвета встречаются нечасто.
Контраст в свою очередь может достигаться по-разному и дает разную эффективность. Например, выделение цветом, даже очень ярким и выразительным, все равно не сделает кнопку очень заметной. Иной эффект дает создание контраста с помощью яркости (luminance contrast). Попробуйте выключить весь цвет на своем сайте и обратите внимание на кнопку. Если она продолжает быть заметной, значит, яркостный контраст подобран верно. При этом контрастировать должна не только кнопка в целом со страницей, но и фон элемента с надписью на нем. Преимущество яркостного контраста состоит еще в том, что он работает и для людей с нарушениями зрительного восприятия цвета.
Но если выделение кнопки с помощью яркости так важно, отчего практически никто не использует черный цвет на белом фоне? Тут ответ очевиден. На странице имеется текст, который обычно тоже черный. А если сайт изобилует цветными фотографиями и изображениями, черная кнопка на нем просто останется незаметной.
Таким образом, кнопка CTA будет выделяться, если она контрастирует с фоном страницы по яркости и с остальными элементами сайта по цвету.
При этом не следует забывать и о внешней привлекательности CTA-кнопки. Важно, чтобы она не столько была красива, сколько привлекала посетителей своим оформлением и заставляла на себя нажать. Слишком яркий, диссонирующий цвет будет скорее отталкивать, поэтому нужно придерживаться цветовой гармонии и естественности.
Психология цвета в маркетинге
Уже абсолютно точно можно сказать, что каждый цвет рождает в человеке определенные эмоции. Как правило, это действует на всех людей одинаково, чем пользуются дизайнеры при проектировании интерфейсов. Однако у каждого человека есть свои особенности восприятия, связанные с событиями, сильно повлиявшими на его жизнь, с какими-либо личными ассоциациями. Для упрощения же примем, что все люди воспринимают цвета более или менее одинаково, находясь в едином информационном пространстве.
- Желтый цвет
Ассоциируется с солнцем и позитивным настроением. Данный цвет, сильно контрастирующий с черным, сегодня принято использовать для привлечения внимания посетителей к выгодам и уникальному торговому предложению продукта.
При этом важно соблюсти правильный оттенок. Скажем, желто-зеленый уже будет выглядеть нездоровым, вызывать нежелательные ассоциации. Оттенки должны быть более комфортными и теплыми.
- Красный цвет
Этот цвет обладает энергией, вызывая у человека мотив либо срочно что-то сделать, либо, наоборот, немедленно прекратить какой-либо процесс. Во всех случаях красный элемент привлекает внимание. Цвет используется для возбуждения в посетителе сайта желания немедленно сделать заказ.
Но здесь важно не перегибать палку и не насыщать сайт красным. Следует помнить о пожилых людях, для которых этот цвет будет ассоциироваться уже с опасностью и агрессией.
- Синий цвет
Часто использование этого цвета способствует росту продаж. У посетителей возникают ассоциации со стабильностью и спокойствием. Избавляя от тревоги, синий цвет отлично подойдет в качестве фонового. А вот для призыва к действию он не подходит. Настраивающий на спокойствие, синий цвет кнопки на сайте не отвлекает на себя внимание посетителя. Использовать его стоит на ресурсах по страхованию, медицинских и финансовых порталах.
- Зеленый цвет
Издавна зеленый ассоциируется с природой, органичностью и натуральностью. Считается, что данный цвет благотворно влияет на зрение, в целом обладает целительными свойствами. Поэтому его имеет смысл внедрять в рекламе лекарств, аптек, клиник, а также органических продуктов питания. Зеленая кнопка отлично контрастирует на белом фоне, привлекая внимание и одновременно не раздражая глаза.
Использование этого цвета для призыва действия зависит от ваших задач. Если импульсивная покупка не нужна, а клиент ожидает вашего одобрения, зеленая кнопка будет как нельзя кстати. В рекламе же использовать данный цвет в качестве основного не следует: это может выглядеть вычурно.
- Оранжевый цвет
Придает жизненный тонус и дарит оптимизм. Издревле этот цвет ассоциируется со здоровьем и творческим развитием. Оранжевые тона отлично подойдут для продвижения медикаментов, услуг здравоохранения, образовательных продуктов, товаров для детей. Придавая активности, этот цвет одновременно способствует душевному расслаблению и внутреннему равновесию.
Оранжевые кнопки CTA успешно выполняют свою функцию, выделяясь практически на любом фоне. На достаточно простых сайтах, выполненных в светлых тонах, они обеспечивают хорошую конверсию. Оранжевый цвет приятен для большей части людей, поэтому сайты, где этот цвет активно используется, могут иметь очевидные преимущества.
Однако определенный процент посетителей не видит в таком цветовом решении особой привлекательности (а это 22 % мужской и 33 % женской аудитории), некоторые же и вовсе считают его слишком бедным (22 % от общего числа посетителей). Поэтому использовать этот цвет следует в меру.
- Фиолетовый цвет
В сознании общества олицетворяет собой благородство, силу, успех. Это достаточно яркий цвет, хорошо контрастирующий с желтым и зеленым, сочетающийся с синим и розовым. Фиолетовые элементы сайта заметно выделяются в случае преобладания белого и черного цветов в оформлении и поэтому отлично подходят для повышения конверсии.
Но нужно помнить, что мужскую аудиторию изобилие оттенков фиолетового, а также оранжевого и коричневого в целом отталкивает. Поэтому, если основу целевых посетителей сайта составляют мужчины, данного цветового решения лучше избегать.
- Черный цвет
Ассоциируется со строгостью, аристократизмом и утонченностью. Зачастую используется для выделения более светлых и жизнеутверждающих оттенков. Черный цвет хорошо работает на мужскую целевую аудиторию для продвижения товаров верхней ценовой категории. Если же сайт не предлагает продукты класса премиум (например, дорогие модели автомобилей), использование черного в оформлении лучше ограничить. Тем не менее отдельные элементы, выполненные в данном цвете, могут дать хороший эффект.
Следует помнить, что помимо классической респектабельности черный несет в себе часто траурное настроение, особенно сильно воспринимаемое старшей возрастной категорией пользователей.
- Белый цвет
Наряду с черным это второй цвет, считающийся основным. Обычно он олицетворяет свежесть и чистоту. Достаточно часто используется как вторичный, поскольку дает множество оттенков остальных цветов. При правильном использовании дизайнерами белый способен дать мощный позитивный эффект. Вместе с тем чрезмерное изобилие этого цвета способно лишить сайт живости, привнести в него мертвую стерильность и пустоту.
Маркетинговая сила цвета часто мотивирует посетителей сайтов купить тот или иной продукт, вызывая у людей определенные чувства. При грамотном использовании цветовых решений реклама становится гораздо более эффективной — соответственно, увеличиваются и продажи. Для этого необходимо изучить особенности основных цветов, а затем определить требуемый эффект, который будет оказываться на аудиторию. Последнюю в свою очередь следует тщательно проанализировать, понять ее потребности. Только на основе этой информации вы сможете подобрать оптимальную цветовую гамму, которая даст нужный результат.
Результаты тестов по поводу цвета кнопки призыва к действию на сайте
Какой цвет кнопки на сайте дает лучшую конверсию? На этот почти философский вопрос у каждого будет свой ответ. Например, начинающие специалисты в маркетинге с ходу скажут, что это красный. В то же время опытные маркетологи ответят, что кнопка CTA должна быть как минимум контрастной. Были проведены исследования на эту тему среди нескольких тысяч пользователей. Результаты получились весьма интересные.
Красный нужен, чтобы побеждать?
Выше мы рассматривали красную кнопку как дающую наилучшую конверсию. Причина такого эффекта заключается в ассоциациях и эмоциях, порождаемых этим цветом. В частности, красный сигнализирует об опасности, необходимости срочно остановиться; в то же время он вызывает в человеке повышенную страстность. Считается, что в основном эти качества оказывают положительное влияние на интернет-маркетинг, давая лучшие результаты. Но нужно учитывать, что красный у многих людей также порождает тревожное, иногда даже паническое настроение.
Так на самом ли деле красная кнопка обеспечивает самую высокую конверсию? В действительности это не так. По поводу психологии цвета написано множество публикаций. Специалисты сходятся в мнении: на конверсию в первую очередь влияет контрастность кнопки, а не ее конкретный цвет. Другими словами, чем контрастнее элемент CTA, тем лучше маркетинговые результаты. Но и это правило срабатывает не всегда.
Как быть, если контраст для сайта дают несколько различных цветов? Какой из них лучше и в какой степени? Ответить на эти вопросы позволит А/Б-тестирование, в процессе которого сравниваются 2 варианта цветового решения одного элемента.
Такие же тесты были проведены и для определения зависимости конверсии от выбранного цвета CTA-кнопки. Для этих целей на сайтах двух интернет-магазинов создали несколько одинаковых всплывающих окон, отличающихся лишь кнопкой. Цвета выбирались следующие:
Красный и синий
Тестирование проводилось на зеленовато-голубом фоне, который затемнялся поп-апом. Фон самого всплывающего окна имел серо-синий цвет. Предполагали, что такое сочетание даст наибольший контраст, при котором красная кнопка обеспечит наилучшую конверсию.
Результаты теста на удивление получились иными. Лучшую конверсию дала синяя кнопка (на 9,7 % выше, чем у красной). При этом посещаемость сайта была достаточно высокой: число участников составило 6506 человек. Такая значимая выборка дала итоговую конверсию победившей кнопки в 4,18 %.
Какой тут можно сделать вывод? Контрастность не всегда обеспечивает наилучший результат, но использовать ее все же стоит во всех случаях.
Здесь очень важно знать целевую аудиторию, ее ожидания, ассоциации, возникающие с определенными цветами, и соответствие данных цветовых решений ожиданиям. Например, пользователи привыкли видеть зеленый и синий, поскольку они были основой сайта до появления всплывающего окна. Вполне вероятно, эти цвета закрепились у них как дружественные на уровне подсознания.
Синий и зеленый
Победившую на предыдущем этапе синюю кнопку теперь сравнивали с зеленой, являющейся в данных условиях более контрастной. Но, учитывая неожиданные результаты проведенного теста, исследователи не были уверены в безоговорочной победе зеленой кнопки в текущем поединке.
Тем не менее этот раунд дал максимальный результат. Конверсия зеленой кнопки оказалась выше, чем у синей, на целых 65 %. Правда, количество участников в данном тесте составило всего 1322 человека и при большем числе посетителей разница была бы меньшей. Но факт остается фактом: зеленая CTA-кнопка показала лучший результат, обеспечив конверсию 4,24 %.
Красный и зеленый
Дальнейший этап тестирования проводился на втором сайте: сравнивались зеленая кнопка с красной. Голубой фон данного интернет-магазина также затенялся всплывающими окнами. Для привлечения аудитории демонстрировалась скидка с помощью изображенных на поп-апе красных шариков. Здесь преимущество с точки зрения контраста было однозначно у зеленой кнопки.
Таким образом, по результатам теста зеленая кнопка обеспечила конверсию на 11,4 % выше, чем красная. За время тестирования сайт посетили 6488 человек. Конверсия победившей кнопки составила 3,61 %.
Зеленый и синий
Прежние соперники тестировались снова, но уже на втором сайте. Оба варианта хорошо контрастировали с фоном, но лучший результат показала зеленая кнопка (на 11,4 % по сравнению с синей). В тесте принимали участие 7350 посетителей, дав итоговую конверсию победителя раунда на уровне 3,4 %.
Итоги тестирования
Какой вывод можно сделать? По этим результатам нельзя сказать, что зеленая кнопка — наилучший по показателям вариант абсолютно для всех сайтов. Также по итогам первого этапа не следует думать, что контрастность не срабатывает. Она должна быть учтена, но лишь после анализа целевой аудитории.
Универсальный рецепт здесь только один. Результаты любых тестирований, как бы убедительно они ни выглядели, желательно еще раз проверять на собственном опыте. На данный момент не существует стопроцентно работающих решений, равно как и волшебных таблеток от всего.
Немного о полупрозрачных кнопках на сайте
В современном веб-дизайне прослеживается тенденция использования фотографий для фона, а также прозрачных кнопок. В отличие от полностью залитых цветом элементов такие «призрачные» веб-кнопки не привлекают к себе внимания.
Недостаток этих кнопок состоит в их незаметности. Пользователи не оценивают в полной мере значимость элементов с прозрачным оформлением, отвлекаясь на красочные фоновые фотографии.
Иногда кнопки выглядят так, что даже не приходит в голову на них нажать. Например, они воспринимаются как обычный выделенный текст. Это главное проблемное место пользовательской эргономичности прозрачных кнопок.
Но вместе с тем прозрачность этого элемента отлично сочетается с «фотообоями» сайта. Можно ли, сохранив это качество, как-то выделить прозрачную кнопку, чтобы посетители хотели на нее нажать?
Да, существует компромиссное и вполне рабочее решение. Оно заключается в использовании полупрозрачного элемента, размещенного поверх фона и действительно напоминающего кнопку.
Полупрозрачность такой CTA-кнопки дает возможность видеть фон сквозь нее. Тем самым сохраняется внешняя привлекательность «кнопки-призрака», но при этом пользователь отчетливо понимает, что сюда можно кликнуть.
12 полезных советов по созданию эффективной кнопки призыва к действию
Приведенные ниже простые принципы помогут вам создать эффективно работающую CTA-кнопку.
Соответствуйте бренду
Кнопка должна быть оформлена в соответствии со своим контекстом. То есть при создании элемента нужно продумать цветовую гамму и графический стиль, а также по возможности внедрить утвержденный дизайн логотипа. Вполне вероятно, что форма логотипа отлично впишется в общее оформление элемента и даст хороший эффект. Здесь перед вами открывается широкий простор для творчества.
Так, если дизайн вашего сайта предполагает преобладание плоских элементов, большие выпуклые кнопки, как у Apple, будут смотреться чужеродно. Если возможно, вписывайте детали логотипа в интерфейс (отдельные формы, линии, цвета и т. д.).
Соответствуйте интерфейсу
Помимо логотипа учитывайте интерфейс сайта. Вполне возможно, что кнопка хорошо отобразится лишь на мобильных устройствах, в то время как на ПК она работать не будет. В таком случае необходимо предусмотреть для нее рабочую замену.
Проверьте контрастность
Благодаря усилиям дизайнеров Apple и повальному распространению этой техники кнопки сейчас окружают нас повсюду. И среди этого изобилия ваш элемент CTA может легко затеряться. Поэтому пробуйте экспериментировать с цветом кнопки на сайте, ее размером, шрифтом и другими параметрами, позволяющими однозначно выделить кнопку. Обеспечьте ее контраст с остальными элементами сайта.
Задумайтесь о форме
Если интерфейс сайта предполагает использование закругленных кнопок, можно выделить CTA-элемент, сделав его прямоугольным, круглым или даже треугольным. Это еще один способ создания контраста, привлекающего внимание пользователя.
Скройте все малозначимые элементы сайта
Сюда относятся пункты меню, всевозможные контроллеры и бегунки. Их нужно по возможности скрывать либо оформлять в едином стиле с общим интерфейсом так, чтобы они не выделялись (например, использовать одинаковые радиусы закруглений, но различные тени, градиенты и т. п.).
Добавьте «воздуха»
Акцент на кнопке можно создать, окружив ее обширным пустым пространством. Так элемент гарантированно станет заметнее.
Оформите границы кнопки
Большая часть веб-кнопок обрамляется обводкой. И здесь существует важное правило: когда кнопка темнее фона, ее следует обрамлять еще более темной обводкой. Если же фон более темный, то граница кнопки должна быть темнее именно его.
Анимируйте кнопку
Возможность анимации многие упускают из вида. Помните, что кнопку следует оживить, добавив эффекты увеличения, моргания или иного движения при наведении курсора мыши либо независимо от действий пользователя.
Используйте размытые тени аккуратно
Существует так называемый закон теней, в соответствии с которым тень максимально эффективна, когда обрамляемый ею элемент светлее фона. В иных случаях затенением следует пользоваться с большой аккуратностью.
Добавляйте вспомогательные пиктограммы
Небольшие иконки на кнопках помогут посетителю сориентироваться. К примеру, стрелка вправо даст пользователю знать, что после нажатия на элемент произойдет переход на следующую страницу либо выход с текущей. А нажав на кнопку с пиктограммой стрелки вниз, посетитель попадет в выпадающее меню.
Распределяйте элементы по степени важности
При создании интерфейса нужно задать некий приоритет функциям, определив для них первичный, вторичный и третичный стили. В первой, наиболее приоритетной группе кнопки CTA должны быть окрашены в самые сильные цвета. Ослабляйте цветовую гамму с уменьшением значимости элементов. Снижайте акцент кнопок также путем уменьшения их размеров и пустого пространства вокруг них. Уменьшая шрифт надписей и уровень тиснения, вы также снизите визуальный вес элементов.
Явно отображайте текущее состояние кнопки
Многим будет очевидно, что кнопка должна визуально выглядеть как нажатая или отжатая в зависимости от ее состояния. Применительно к CTA-элементу эта наглядность особенно важна для пользователя. Реализовать данный эффект можно с помощью функционала CSS (тени, градиенты, границы). В качестве альтернативы при наличии достаточного места используются, хотя и достаточно редко, две кнопки вместо одной.
Подытожим. В нынешнее время, когда интерфейсы пересыщены отвлекающими элементами, маркетологам приходится противостоять баннерной слепоте, возникающей у пользователей. Современные условия вынуждают владельцев продающих сайтов использовать все доступные средства для захвата внимания аудитории. Красивой и яркой упаковки продукта, снабженной цепляющим креативом, сегодня недостаточно. Необходимо обращать внимание на самые мелкие детали для мотивации пользователей, в том числе на цвет кнопки на сайте.
22 лучших формы входа и регистрации на сайте в HTML&CSS!
В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.
На сегодняшнее время, формы html css, очень популярны, так как всё больше сайтов имеют свою регистрацию пользователей, а это означает, что им нужна будет форма для регистрации пользователей и их входа в личный кабинет (или ещё куда-то).
Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.
Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.
Итак, затаив дыхание, представляю коллекцию 22 форм регистрации и входа на сайт!
1 → Темная форма входа
Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.
2 → Светлая форма входа
Светлая форма входа с прозрачной рамочкой и четкой структурой.
3 → Эффектная форма с эффектом появления
Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.
4 → Простая форма с эффектом появления
Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.
5 → Красивая форма с логотипом Apple
Продуманная форма на сайт с интересным дизайном и логотипом apple.
6 → Маленькая форма в розовом стиле
Маленькая и простая, в розовом стиле, и интересным дизайном.
7 → Светлая форма
Светлая, в выдержанном стиле и дизайне, ничего лишнего.
8 → Супер форма входа и восстановления пароля
Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.
9 → Приятная дизайнерская форма с эффектом
Приятная на вид, красивый эффект появления иконок при активации поля ввода.
10 → Форма серого цвета
Серый оттенок, в виде друг на друга наложенных листочков.
11 → Крупная форма с дополнительным элементом
Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).
12 → Дизайн в виде блокнота
Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.
13 → Красочная, прозрачная форма
Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.
14 → Apple Iphone форма
Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!
15 → Чёткая форма с заголовком
Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.
16 → Тёмная форма
Тёмная форма с красивой и заметной кнопкой отправки данных.
17 → Черная форма
Черная форма входа с белыми полями – хорошее сочетание цветов.
18 → Горизонтальная форма входа и регистрации
Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.
19 → Темная форма с дополнительными элементами
Темная форма с кнопками входа через социальные сети и красивыми полями.
20 → Форма входа на сайт + регистрация
Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.
21 → Белая форма с красным заголовком
Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.
22 → Форма входа, регистрации и восстановление пароля
Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.
Заключение
Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.
При использовании конкретной формы, Вам остается лишь её (возможно) немного корректировать, подогнать под свой сайт, и все будет супер! Если Вы собираетесь использовать какую-то из форм – дайте мне знать об этом в комментарии!
Данный урок подготовлен для вас командой сайта /
Подготовил: Владислав Бондаренко
Css button transparent — Pretag
Как создать прозрачную кнопку с помощью HTML и CSS?, Прозрачную кнопку можно легко создать с помощью HTML и CSS. В этой статье мы будем использовать background-color: transparent; свойство для создания кнопки с прозрачным фоном., Код CSS: В этом разделе мы создадим кнопку, используя свойство CSS. Мы будем использовать цвет фона: прозрачный; свойство, чтобы установить кнопку с прозрачным видом., Полный код: в этом разделе мы объединим два вышеупомянутых раздела, чтобы создать кнопку с прозрачным фоном.
Похоже, ваш АКТУАЛЬНЫЙ вопрос заключается в том, как предотвратить границу после нажатия на нее. Это можно решить с помощью псевдоселектора CSS:: active., Это встроенный стиль. Вы определяете границу 1 пиксель, сплошную линию и черный цвет. Затем устанавливается прозрачный цвет фона. Установка значения «Нет» для фонового изображения также работает:,
6
Вы можете оптимизировать его, изменив цвет фона: Прозрачный; фон-повтор: без повторения; на задний план: Прозрачный без повтора;
— Филипе Амарал
24 июля ’17 в 4: 472017-07-24 04:47
кнопка { фон - цвет: Прозрачный; фон - повтор: нет - повтор; граница: нет; курсор: указатель; переполнение: скрыто; наброски: нет; }
кнопка { фон - цвет: Прозрачный; фон - повтор: нет - повтор; граница: нет; курсор: указатель; переполнение: скрыто; наброски: нет; }
кнопка {
цвет фона: Прозрачный;
фон-повтор: без повторения;
граница: нет;
курсор: указатель;
переполнение: скрыто;
наброски: нет;
}
загрузить больше v
Вы можете заменить его другим элементом HTML, например,
Разметка для этого требует только одного элемента HTML. В этом случае используется элемент
.
Кнопка
загрузить больше v
Свойство opacity добавляет прозрачность к фону элемента и
ко всем его дочерним элементам. Это затрудняет чтение текста внутри прозрачного элемента:, Примечание: при использовании свойства непрозрачности для добавления прозрачности к
фон элемента, все его дочерние элементы становятся прозрачными как
хорошо.Это может затруднить чтение текста внутри полностью прозрачного элемента. Если
вы не хотите применять непрозрачность к дочерним элементам, используйте значения цвета RGBA
вместо этого (см. «Дополнительные примеры» ниже). Уровень непрозрачности описывает уровень прозрачности, где 1 вообще не прозрачен, 0,5 — прозрачность 50%, а 0 — полностью прозрачна. Чтобы не применять непрозрачность к дочернему элементу элементы (как в примере выше) используют значения цвета RGBA
вместо.
В следующем примере устанавливается непрозрачность цвета фона, но не текста:
Определение и использование
Свойство непрозрачности
устанавливает уровень непрозрачности для элемента.
загрузить больше v
Непрозрачность
— CSS: Каскадные таблицы стилей
Свойство opacity
CSS устанавливает непрозрачность элемента. Непрозрачность — это степень скрытия содержимого за элементом, противоположная прозрачности.
непрозрачность: 0,9
непрозрачность: 90%
непрозрачность: наследование;
непрозрачность: начальная;
непрозрачность: вернуть;
непрозрачность: не задано;
Значения
-
<альфа-значение>
A
<номер>
в диапазоне0.От 0
до1,0
включительно или<процент>
в диапазоне от0%
до100%
включительно, представляя непрозрачность канала (то есть значение его альфа-канала). Любое значение вне интервала, хотя и действительное, ограничивается ближайшим пределом в диапазоне.Значение Значение 0
Элемент полностью прозрачный (то есть невидимый). Любой <номер>
строго между0
и1
Элемент полупрозрачный (то есть видно содержимое за элементом). 1
(значение по умолчанию)Элемент полностью непрозрачный (визуально твердый).
непрозрачность
применяется ко всему элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами.Таким образом, элемент и его дочерние элементы имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют разную прозрачность относительно друг друга.
Использование непрозрачности
со значением, отличным от 1
помещает элемент в новый контекст наложения.
Чтобы изменить непрозрачность только фона, используйте свойство background
со значением цвета
, которое позволяет использовать альфа-канал. Например:
фон: rgba (0, 0, 0, 0.4);
Если непрозрачность текста отрегулирована, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди с ослабленным зрением могли прочитать содержимое текста. страница.
Коэффициент контрастности цвета определяется путем сравнения яркости текста с измененной непрозрачностью и значений цвета фона. Чтобы соответствовать текущим Рекомендациям по обеспечению доступности веб-контента (WCAG), коэффициент равен 4.5: 1 требуется для текстового содержимого и 3: 1 для более крупного текста, такого как заголовки. Большой текст определяется как 18,66 пикселей и полужирный или больше, или 24 пикселей или больше.
Установка непрозрачности
В следующем примере показано, как свойство opacity
изменяет непрозрачность всего элемента и содержимого, что затрудняет чтение текста.
HTML
Вы этого не видите.
Это легче увидеть.
Это очень легко увидеть.
CSS
div {цвет фона: желтый; font-weight: жирный; размер шрифта: 130%; }
.свет {
непрозрачность: 0,2;
}
.Средняя {
непрозрачность: 0,5;
}
.тяжелый {
непрозрачность: 0,9;
}
Результат
Установка непрозрачности при наведении курсора
В следующем примере непрозрачность изменяется при наведении курсора, поэтому полосатое фоновое изображение родительского элемента просматривается сквозь изображение.
HTML
CSS
img.opacity {
непрозрачность: 1;
}
img.opacity: hover {
непрозрачность: 0,5;
}
.wrapper {
ширина: 200 пикселей;
высота: 160 пикселей;
цвет фона: # f03cc3;
фоновое изображение: линейный градиент (90 градусов, прозрачный 50%,
rgba (255,255,255, 0,5) 50%);
размер фона: 20 пикселей 20 пикселей;
}
Результат
Таблицы BCD загружаются только в браузере
Как добавить кнопки призрака CSS в вашу тему WordPress
Недавно один из наших читателей попросил нас дать руководство о том, как добавить кнопки призрака CSS в свои темы WordPress.Кнопки-призраки — это прозрачные кнопки с призывом к действию, которые очень популярны в наши дни. В этой статье мы покажем вам, как можно легко добавить кнопки-призраки CSS в свою тему WordPress, используя очень мало CSS и HTML.
Что такое Ghost Button?
Кнопка-призрак — это терминология веб-дизайна, используемая для прозрачных кнопок, которые сливаются с их фоном и заметны только по границе вокруг них.
Создать обычные кнопки призыва к действию в WordPress довольно просто.Вы даже можете добавлять им свои сообщения и страницы без написания CSS или HTML. Поскольку кнопки-призраки — это новая тенденция, не существует специальных плагинов для создания только кнопок в стиле призраков.
Добавление кнопок-призраков в WordPress
Как упоминалось ранее, вам понадобится немного CSS и HTML, чтобы добавить кнопки-призраки в вашу тему WordPress.
Сначала вам нужно добавить следующий код CSS в таблицу стилей вашей темы или дочерней темы.
Вам понадобится FTP-клиент для подключения к вашему веб-серверу.После подключения перейдите в папку / wp-content / themes / Your-Theme / и найдите файл style.css. Откройте этот файл для редактирования в текстовом редакторе, а затем вставьте этот фрагмент кода в конец файла. (Узнайте больше о вставке фрагментов кода из Интернета в WordPress).
.ghost-button { дисплей: встроенный блок; ширина: 200 пикселей; отступ: 8 пикселей; цвет: #fff; граница: 2px solid #fff; выравнивание текста: центр; наброски: нет; текстовое оформление: нет; переход: цвет фона 0.2с легкость выхода, цветовая задержка 0,2 с; } .ghost-button: при наведении, .ghost-button: active { цвет фона: #fff; цвет: # 000; переход: цвет фона 0,3 с замедление, цвет 0,3 с легкость вставки; }
Сохраните изменения и загрузите файл обратно на сервер.
Теперь, когда вы хотите отобразить кнопку, все, что вам нужно сделать, это добавить class = ”ghost-button”.
Например, если вы хотите добавить ссылку для загрузки, создайте ссылку для загрузки, как обычно.Затем переключитесь в текстовый редактор, чтобы увидеть форматирование HTML.
Найдите HTML-код для ссылки для загрузки и добавьте класс CSS, например:
Сохраните или обновите сообщение, а затем просмотрите его. Вы увидите красивую кнопку-призрак вместо простой старой ссылки.
Мы надеемся, что эта статья помогла вам узнать, как добавить кнопку-призрак в вашу тему WordPress. Вы также можете ознакомиться с нашим руководством о том, как добавлять кнопки в WordPress без использования шорткодов
.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.Вы также можете найти нас в Twitter и Facebook.
Расширенный стиль кнопок | Webflow University
В этом видео используется старый интерфейс. Скоро появится обновленная версия!
Вы можете стилизовать элемент Button в своих проектах разными способами.
В этом уроке
В этом уроке мы рассмотрим четыре примера расширенного стиля:
- Выравнивание кнопок
- Прозрачный фон
- Наведение и переходы
- Тени прямоугольников
Выравнивание кнопок
Если у вас несколько кнопки, занимающие одинаковое горизонтальное пространство, будут казаться прижатыми друг к другу.Вы можете добавить поля к обеим сторонам, чтобы создать пространство между ними. Удерживание клавиши Alt при перетаскивании стрелок полей увеличит поля с обеих сторон кнопки.
Однако, если другие экземпляры этой кнопки выровнены по одной стороне, например, по левой стороне, добавление поля с обеих сторон кнопки отодвинет их от выравнивания по левой стороне.
Чтобы противодействовать этому, вы можете предпринять следующие шаги:
- Добавьте блок div из панели добавления
- Переместите существующие кнопки в блок div
- Дайте блоку div имя класса
- Добавьте отрицательный значение для левого поля в блоке div, равное полю, добавленному к кнопкам (например,грамм. Если на кнопке есть 20 пикселей левого и правого поля, вы должны добавить -20 пикселей левое поле к блоку div)
Это обеспечит выравнивание кнопок по левому краю с левой стороны. Если есть экземпляры тех же кнопок, которые центрированы, отрицательное поле не повлияет на них.
Прозрачный фон
Вы можете создать прозрачный фон на кнопках и выделить его другими способами. Например, вы можете добавить однотонную рамку.
Цвет фона по умолчанию синий.Вы можете изменить цвет фона, прозрачность и границы, чтобы они выглядели так, как вам нравится. Вот как создать кнопку с прозрачным фоном и рамкой:
- Добавьте кнопку и присвойте ей имя класса
- Щелкните цвет фона и установите непрозрачность на 0%
- Добавьте сплошную границу размером 1 пиксель и установите цвет в белый
- Добавить радиус границы (большой радиус границы, например 500 пикселей, приведет к кнопке в форме таблетки)
Пример трех кнопок с прозрачным фоном.
Элементы управления при наведении курсора
По умолчанию для кнопки нет стиля при наведении курсора. Если мы перейдем в «Состояния» и выберем состояние при наведении курсора, мы сможем установить совершенно другой цвет фона. Например, мы можем даже изменить непрозрачность цвета фона.
Вы можете установить любые другие стили при наведении курсора, например, перемещая кнопку вверх, добавляя преобразование — перемещение.
Подробнее:
Box Shadows
Обычно добавляют тени при взаимодействии с кнопками.Стили тени блока обеспечивают хороший диапазон управления этими теневыми эффектами.
Подробнее: Использование теней блоков
Попробуйте Webflow — это бесплатно
В этом видео используется старый интерфейс. Скоро появится обновленная версия!
Используйте прозрачные границы и контуры, чтобы улучшить режим высокой контрастности.
Допустим, у вас есть эта симпатичная маленькая кнопка.
Поскольку контур
не обрезается по форме кнопки, если вы используете радиус границы
, может возникнуть соблазн использовать резкую box-shadow
для стилей фокусировки.
button: focus {
наброски: нет;
коробка-тень: 0px 0px 0px 3px # 192a56;
}
Со стандартной операционной системой и настройками браузера это выглядит нормально. Здесь много контраста, а стиль фокусировки очень четкий. Работа сделана, да? К сожалению, не потому, что в режиме высокой контрастности Windows стили фона и фокуса, вероятно, не отображаются.
Поскольку фон не отображается в режиме высокой контрастности, у пользователя нет визуальной индикации событий наведения или фокусировки.
Есть решение: прозрачные границы и контуры! Сначала мы добавляем прозрачную рамку к нашей кнопке:
кнопка {
граница: 1px сплошная прозрачная;
/ * все остальные CSS * /
}
Эта граница полностью невидима, и вы, вероятно, даже не заметите ее, но разница в режиме высокой контрастности Windows огромна.
Это не исправляет стиль фокусировки.Лучше всего обеспечить подлинный контраст со стилями фокуса, чтобы, когда пользователь клавиатуры вкладывает s в ваш элемент, он может видеть, что он сфокусирован. Чтобы улучшить начальный стиль фокусировки, нам нужно немного его настроить:
button: focus {
контур: 2px сплошной прозрачный;
смещение контура: 4 пикселя;
коробка-тень: 0px 0px 0px 3px # 192a56;
}
Сначала мы устанавливаем 2-пиксельный контур
, а затем с помощью удобного смещения контура
выдвигаем его еще на 4 пикселя.Теперь, когда пользователь нажимает на нашу кнопку, она отлично смотрится как в стандартной операционной системе, так и в конфигурации браузера и , она отлично смотрится в режиме высокой контрастности Windows.
Прозрачная рамка помогает кнопке лучше отображаться с самого начала, а затем контур добавляет еще лучший визуальный индикатор того, что произошло событие фокуса.
Вот весь CSS для кнопки:
кнопка {
дисплей: встроенный блок;
отступ: 0.5рем 2рем;
шрифт: наследовать;
font-weight: жирный;
радиус границы: 2 бэр;
граница: 1px сплошная прозрачная;
фон: # 3f25c4;
цвет: #ffffff;
минимальная ширина: 10 бэр;
курсор: указатель;
}
кнопка: навести,
button: focus {
фон: # 8c7ae6;
цвет: # 000000;
}
button: focus {
контур: 2px сплошной прозрачный;
смещение контура: 4 пикселя;
коробка-тень: 0px 0px 0px 3px # 192a56;
}
Это быстрая победа для всех: визуальный дизайн остался почти нетронутым и доступен.
Adobe Photoshop — Полупрозрачная кнопка, меняющая цвет на основе фона
Если вы используете Photoshop CS6 Extended (и некоторые предыдущие версии), вы можете создать свою векторную фигуру, затем щелкните ее правой кнопкой мыши или выберите «Создать 3D-экструзию» в меню «3D». Как только это будет трехмерная форма, нажмите кнопку на панели 3D и в свойствах измените Extrusion на 5 или 10 или что-то, что вам нравится, а в атрибутах Cap отрегулируйте Bevel и Inflation, пока вы не будете довольны этим. Вы можете добавлять и перемещать источники света, чтобы получить то освещение, которое вам нравится.
Выберите материалы (передний / задний скос / раздувание), а затем измените непрозрачность (на панели «Свойства») на то, что вам нравится. Чем меньше непрозрачность, тем она прозрачнее. Вы даже можете поиграть с тенями от источников света, поскольку они тоже прозрачны. Наконец, когда вас устраивают форма, блики и заглавные буквы, выберите «Рендеринг» в меню 3D — это может занять немного больше времени, но дает гораздо лучшие результаты, чем предварительный просмотр GL в реальном времени.
По завершении вы можете сохранить для Интернета… Используйте PNG-24, и все ваши прозрачные тени и материалы также будут прозрачными. ДО того, как вы сохраните PNG, в нижнем левом углу диалогового окна «Сохранить для Интернета» есть кнопка предварительного просмотра, просмотрите его в Safari (или другом браузере, который у вас есть) — и если в вашем браузере есть инструменты разработчика, измените цвет фона, и вы увидите что все прозрачные части вашей графики позволяют просвечивать фоновый цвет / изображение.
Я также скажу, что если вы начнете с векторной формы, вы можете выбрать ее на панели «3D» и выбрать «Редактировать источник» на панели «Свойства» — при этом открывается исходная векторная фигура, чтобы вы могли ее настроить, сохранить, а затем в Photoshop. применяет изменения к 3D-объекту.Это обеспечивает неразрушающий и полностью редактируемый рабочий процесс.
Дополнительную информацию о 3D-функциях Photoshop можно найти по адресу: http://www.photoshop.com/products/photoshop/3d
Ура!
ОБНОВЛЕНИЕ: объединено в примере
Пример 3D-экструзии со скосом и раздувом, материал стекла, визуализированный, затем Сохранить для Интернета как PNG-24 с прозрачностью, затем помещенный на другой фон … Я сделал это в качестве быстрого примера и чтобы остановить ненавистников, которые думали, что я рассылал спам, даже не зная о мощи 3D-функций Photoshop.)
4 простых перехода CSS для улучшения ваших кнопок — BootstrapBay
Призыв к действию — один из важнейших элементов веб-сайта, темы или шаблона. Если подумать, почти каждая веб-страница создана с целью побудить пользователя к действию.
Так почему бы не нарядить их немного и не добавить несколько простых эффектов перехода CSS.
В этом руководстве я расскажу о 4 простых переходах CSS, которые вы можете использовать, чтобы улучшить свои кнопки и добавить немного яркости своей веб-странице.
Если вы хотите увидеть больше примеров и полное руководство, вы можете ознакомиться с нашей новой статьей о Bootstrap 4 Buttons .
Настройка кода
В вашем файле CSS вы собираетесь добавить следующий код CSS в элемент button
.
body> button { фон: # 428BCA; цвет: #fff; семейство шрифтов: Sans-serif; размер шрифта: 20 пикселей; высота: 60 пикселей; ширина: 150 пикселей; высота строки: 60 пикселей; маржа: 25px 25px; выравнивание текста: центр; граница: 0; переход: все 0.3s облегчают 0s; }
Вышеуказанные свойства CSS можно настроить по своему усмотрению. Скорее всего, у вас уже есть некоторые шрифты и размеры по умолчанию, особенно если вы используете Bootstrap. Не стесняйтесь добавлять, изменять или вычитать все, что хотите.
Однако свойство перехода CSS должно быть включено. Состоит из 4-х элементов:
Свойство: Задает имя или имена свойств CSS, к которым должны применяться переходы.
Продолжительность: Определяет продолжительность, в течение которой должны происходить переходы.
Время: Определяет функцию синхронизации, которая будет использоваться для перехода.
Задержка: Определяет время ожидания между изменением свойства и фактическим началом перехода.
Применение переходов
Теперь, когда основа заложена, давайте приступим к 4 конкретным переходам, которые вы можете применить к своим кнопкам.
Вы можете просмотреть полный код для каждого примера, используя вкладки HTML и CSS в средстве просмотра CodePen.
Темнее
Чтобы затемнить кнопку, просто установите более темный цвет фона, когда: hover активирован.
button: hover { фон: # 3071A9 }
См. Pen ksdmf от BootstrapBay (@bootstrapbay) на CodePen.0
Исчезновение
Чтобы элемент затемнялся, сначала установите непрозрачность на 1 по умолчанию. Затем уменьшите непрозрачность до 0,75, когда активировано: hover. Не стесняйтесь экспериментировать с настройкой непрозрачности.
кнопка { непрозрачность: 1; } button: hover { непрозрачность: 0.75; }
См. Pen pJyvq от BootstrapBay (@bootstrapbay) на CodePen.0
Изменить цвет
Чтобы изменить цвет кнопки, выберите другой цвет фона, когда: активировано наведение.
button: hover { фон: # CF4647; }
См. Pen kCyBG от BootstrapBay (@bootstrapbay) на CodePen.0
Внутренняя рамка
Чтобы создать внутреннюю границу, используйте следующие свойства CSS box-shadow. Не стесняйтесь увеличивать или уменьшать размер тени блока по своему вкусу.
button: hover { box-shadow: вставка 0 0 0 5px # 3071A9; }
См. Pen xzclm от BootstrapBay (@bootstrapbay) на CodePen.0
Заключение
Теперь в вашем распоряжении 4 простых перехода CSS, которые вы можете использовать для оформления кнопок на своей веб-странице. Давай, попробуй их!
Если у вас есть другие интересные переходы, которыми вы хотели бы поделиться, оставьте нам комментарий ниже.