простые примеры кода для новичков
Приветствую всех читающих эту публикацию, а также моих горячо любимых подписчиков! Сегодня я хочу рассказать вам об одном модном и симпатичном объекте, который можно встретить на страницах интернет-магазинов знаменитых брендов. А теперь внимание! Я покажу, как создается прозрачная кнопка 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>Надеюсь статья вооружила вас новыми знаниями и была полезной.
А вы не забывайте, что я с нетерпением жду ваших заявок на подписку! И конечно же делитесь ссылкой на мой блог со своими коллегами и друзьями.
Пока-пока!
С уважением, Роман Чуешов
Прочитано: 1937 раз
Понравилась статья? Поделись с друзьями:
Этот блог уже читают
Как создать контур кнопок
schoolsw3.com
САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
❮ Назад Вперед ❯
Узнать, как стилизовать кнопки контура с помощью CSS.
Контур кнопок
Редактор кода »
Создать контур кнопок
Шаг 1) Добавить HTML:
Пример
<button>Успех</button>
<button>Информация</button>
<button>Предупреждение</button>
<button>Опасность</button>
<button>По умолчанию</button>
Шаг 2) Добавить CSS:
Пример
.
btn {
border: 2px solid black;
background-color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
/* Зеленый */
.success {
border-color: #4CAF50;
color: green;
}
.success:hover {
background-color: #4CAF50;
color: white;
}
/* Синий */
.info {
border-color: #2196F3;
color: dodgerblue
}
.info:hover {
background: #2196F3;
color: white;
}
/* Оранжевый */
.warning {
border-color: #ff9800;
color: orange;
}
.warning:hover {
background: #ff9800;
color: white;
}
/* Красный */
.danger {
border-color: #f44336;
}
.danger:hover {
background: #f44336;
color: white;
}
/* Серый */
.default {
border-color: #e7e7e7;
color: black;
}
.default:hover {
background: #e7e7e7;
}
Редактор кода »
Добавить свойство border-radius для создания кнопок округлого контура:
Пример
.
btn {
border-radius: 5px;
}
Редактор кода »
Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.
❮ Назад Вперед ❯
ВЫБОР ЦВЕТА
ТОП Учебники
HTML УчебникCSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний.
Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять
Условия к использованию,
Cookies и политика конфиденциальности.
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
Сброс CSS Tailwind приводит к тому, что фон главной кнопки становится белым — Вопросы / Помощь
предложения (админ)
#1
Привет, ребята!
Сброс CSS Tailwind приводит к тому, что цвет фона по умолчанию для главной кнопки CTA становится белым, из-за чего кнопка выглядит странно, а текст становится нечитаемым.
Скриншот 20.05.522142×1430 170 КБ
Я подготовил общедоступный codepen для демонстрации поведения:
Arkadii_Kulikov (Аркадий Куликов)
#2
Эй, спасибо за отчет. Мы рассмотрим это.
нд0ут (Алексей Гренишин)
#3
Hey @proposales,
Это известная ошибка/особенность предварительной проверки попутного ветра, см. сброс кнопки предварительной проверки в версии 3, несовместимой с версией 2 · Проблема № 6602 · tailwindlabs/tailwindcss · GitHub
Я бы предложил использовать пользовательскую предварительную сборку без фона -цвет: прозрачный , как кто-то сказал в комментариях.
Или вы можете переопределить стили кнопок после предварительного импорта, например:
.uploadcare--button_primary {
фон: #157cfc;
}
Джей
#4
У меня точно такая же проблема, и я попытался добавить
.uploadcare—button_primary { фон: #157cfc; } на страницу, но это не сработало, как я могу просто изменить HTML-страницу, чтобы это работало?
Аркадий Куликов (Аркадий Куликов)
#5
Привет, Джей. Этот обходной путь должен быть рабочим вариантом.
Не могли бы вы поделиться ссылкой на страницу, которую вы создаете, если она уже есть в Интернете?
Джей
#6
извините, только что увидел это, да ссылка здесь: 88stacks
мне пришлось закомментировать часть попутного ветра, чтобы страница вообще работала, так что вы не видите здесь ошибки,. плохо получить workalone вариант вверх.
Расширенный стиль кнопок | Webflow University
Домашняя страница урока
Расширенный стиль кнопок
Домашний урок
Все уроки
Украсьте кнопки веб-сайта с помощью расширенного стиля.
элементов
В этом видео старый пользовательский интерфейс.
Скоро будет обновленная версия!
Вы можете стилизовать элемент Button в своих проектах разными способами.
В этом уроке
В этом уроке мы рассмотрим четыре примера расширенного стиля:
- Выравнивание кнопок
- Прозрачный фон
- Наведение и переходы
- Тени блоков
Выравнивание кнопок
Если у вас есть несколько кнопок, занимающих одно и то же горизонтальное пространство, они будут казаться прижатыми друг к другу. Вы можете добавить 90 106 полей 90 107 с обеих сторон, чтобы создать пространство между ними. Удерживая клавишу Alt при перетаскивании стрелок поля, вы увеличите поле с обеих сторон кнопки.
Однако, если другие экземпляры этой кнопки выровнены по одной стороне, например по левой стороне, добавление поля с обеих сторон кнопки отодвинет их от выравнивания по левой стороне.
Чтобы противодействовать этому, вы можете предпринять следующие шаги:
- Добавить блок div из панели добавления
- Переместить существующие кнопки в блок div
- Присвоить блоку div имя класса
- Добавить минус значение левого поля в блоке div, равное полю, добавленному к кнопкам (например, если на кнопке есть 20 пикселей левого и правого поля, вы должны добавить -20 пикселей левого поля к блоку div)
Это обеспечит кнопки с выравниванием по левому краю расположены ровно по левой стороне.
Если есть экземпляры тех же кнопок, которые расположены по центру, отрицательное поле не повлияет на них.
Прозрачный фон
Вы можете создать прозрачный фон для кнопок и выделить его другими способами. Например, вы можете добавить сплошную цветную рамку.
Цвет фона по умолчанию синий. Вы можете изменить цвет фона, прозрачность и границы, чтобы они выглядели так, как вам хочется. Вот как создать кнопку с прозрачным фоном и рамкой:
- Добавьте кнопку и дайте ей имя класса
- Щелкните цвет фона и установите непрозрачность на 0%
- Добавьте сплошную рамку толщиной 1 пиксель и установите белый цвет
- Добавьте радиус границы (большой радиус границы, например 500 пикселей, приведет к тому, что кнопка будет иметь форму пилюли)
Элементы управления наведением
По умолчанию на кнопке нет стиля наведения. Если мы перейдем к состояниям и выберем состояние Hover, мы сможем установить совершенно другой цвет фона.