простые примеры кода для новичков

Приветствую всех читающих эту публикацию, а также моих горячо любимых подписчиков! Сегодня я хочу рассказать вам об одном модном и симпатичном объекте, который можно встретить на страницах интернет-магазинов знаменитых брендов. А теперь внимание! Я покажу, как создается прозрачная кнопка 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>

Надеюсь статья вооружила вас новыми знаниями и была полезной. А вы не забывайте, что я с нетерпением жду ваших заявок на подписку! И конечно же делитесь ссылкой на мой блог со своими коллегами и друзьями.

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1945 раз

Понравилась статья? Поделись с друзьями:

Этот блог уже читают
читай и ты!

Кнопки. Компоненты · Bootstrap. Версия v4.0.0

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

Примеры

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

<button type="button">Главный</button>
<button type="button">Вторичный</button>
<button type="button">Успех</button>
<button type="button">Опасность</button>
<button type="button">Предупреждение</button>
<button type="button">Инфо</button>
<button type="button">Светлый</button>
<button type="button">Темный</button>

<button type="button">Линк</button>
Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе

.sr-only текст.

Тэг «кнопка»

Классы .btn созданы для использования с элементом <button>. Однако их также можно использовать внутри <a> или <input> (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).

При использовании классов .btn в элементах <a>, которые в данном случае используются не как линк, ведущий на новые страницы или как якорь, а как триггер внутристраничной функциональности (такой как сворачивание содержимого), необходимо задать этим

<a> атрибут role="button" для правильного поведения в случае применения вспомогательных технологий таких как «экранная читалка».

Link 

<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-* для удаления всех фоновых изображений и цветов в любой кнопке.

<button type="button">Главный</button>
<button type="button">Вторичный</button>
<button type="button">Успех</button>
<button type="button">Опасность</button>
<button type="button">Предупреждение</button>
<button type="button">Инфо</button>
<button type="button">Светлый</button>
<button type="button">Темный</button>

Размеры

Нужно изменить размеры кнопки? Добавьте в нее классы

.btn-lg или .btn-sm для получения дополнительных размеров.

<button type="button">Большая кнопка</button>
<button type="button">Большая кнопка</button>
<button type="button">Маленькая кнопка</button>
<button type="button">Маленькая кнопка</button>

Создайте кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса .

btn-block.

<button type="button">Кнопка блочного уровня</button>
<button type="button">Кнопка блочного уровня</button>

Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в <button>, т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed="true") , когда необходимо прямо объявить такое поведение.

Главная ссылка Ссылка 

<a href="#" role="button" aria-pressed="true">Главная ссылка</a>
<a href="#" role="button" aria-pressed="true">Ссылка</a>

Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу <button>.

<button type="button" disabled>Главная кнопка</button>
<button type="button" disabled>Кнопка</button>

«Отключенные» кнопки, созданные из элемента <a>, ведут себя немного иначе:

  • Элемент <a> не поддерживает атрибут disabled, так что для соответствующих свойств вместо него надо добавлять класс .disabled;
  • Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в <a> для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
  • Отключенные кнопки должны содержать атрибут aria-disabled="true" для указания вспомогательным технологиям состояния элемента.

Главный линк Линк 

<a href="#" role="button" aria-disabled="true">Главный линк</a>
<a href="#" role="button" aria-disabled="true">Линк</a>
Оговорка о некоторых аспектах функциональности ссылок

Класс . disabled использует pointer-events: none для попытки деактивации ссылочной функциональности <a>, но это свойство CSS еще не полностью стандартизовано. В дополнение, даже в браузерах, поддерживающих свойство pointer-events: none, при навигации с клавиатуры пользователи клавиатур для слабовидящих и иных вспомогательных технологий могут нечаянно пройти по данной ссылке. Так что для полной «безопасности» добавляйте в эти ссылки атрибут

tabindex="-1" (для предотвращения возможности «нахождения» их с клавиатуры) и используйте обычные скрипты JavaScript для деактивации их функциональности.

Плагины кнопок

Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».

Переключение состояний

Добавьте data-toggle="button" для переключения на активное состояние кнопки. Если вы делаете это, вы должны вручную добавить в <button> класс . active и aria-pressed="true".

<button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">
  Одиночный переключатель
</button>

Переключатели («галочки») и «кнопки радио»

Стили классов .button могут применяться к прочим элементам, таким как <label>, для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle="buttons" к классу .btn-group, содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.

Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке. Если вы используете другой метод для обновления ввода – например <input type="reset"> или вручную применяя свойство ввода checked – вам потребуется вручную применить класс . active к <label>.

Заметьте, что кнопки с предустановленным выбором требуют вручную добавить класс .active к элементу ввода <label>.

Checked 

<div data-toggle="buttons">
  <label>
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

Active Radio Radio 

<div data-toggle="buttons">
  <label>
    <input type="radio" name="options" autocomplete="off" checked> Active
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
</div>

Методы

Метод Описание
$(). button('toggle') Задействует состояние «нажатия». Дает кнопке вид активированной (нажатой) кнопки.
$().button('dispose') Уничтожает кнопку элемента (в элементе).

Кнопки дизайна и стиля с настраиваемыми свойствами CSS

Версия: v6

shadow

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

Это свойство позволяет указать ширину кнопки. По умолчанию кнопки являются встроенными блоками, но установка этого свойства изменит кнопку на блочный элемент полной ширины.

Это свойство позволяет указать форму кнопки. По умолчанию кнопки имеют прямоугольную форму с небольшим радиусом границы, но установка этого параметра на «круглый» изменит кнопку на закругленный элемент.

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

Это свойство определяет размер кнопки. Установка этого свойства изменит высоту и отступ кнопки.

Цвета

Пользовательские свойства CSS

buttonType

Описание Тип кнопки.
Attribute button-type
Type string
Default 'button'

color​

Описание Используемый цвет из цветовой палитры вашего приложения. Параметры по умолчанию: "основной" , "вторичный" , "третичный" , "успешный" , "предупреждение" , "опасный" , 0″090,09009 «легкий» 90 и "темный" . Дополнительные сведения о цветах см. в теме.
Атрибут цвет
Тип «опасность» ｜ «темный» ｜ «светлый» ｜ «средний» ｜ «основной» ｜ «вторичный» ｜ «успех» ｜ «третичный» ｜ «предупреждение» ｜ строка & Запись<никогда, никогда> ｜ не определено
по умолчанию Не определено

Отключен

Описание IT IAR 9009.10101010101010101010101010 гг.
Атрибут disabled
Type boolean
Default false

download​

Description This attribute instructs браузеры для загрузки URL-адреса вместо перехода к нему, поэтому пользователю будет предложено сохранить его как локальный файл. Если у атрибута есть значение, оно используется в качестве предварительно заполненного имени файла в приглашении Сохранить (пользователь может изменить имя файла, если захочет).
Attribute download
Type string ｜ undefined
Default undefined

expand​

Описание Установите значение "block" для кнопки полной ширины или "full" для кнопки полной ширины с прямыми углами и без левой или правой границы.
Attribute expand
Type "block" ｜ "full" ｜ undefined
Default undefined

fill​

Описание Установите значение "clear" для прозрачной кнопки, похожей на плоскую кнопку, "outline" для прозрачной кнопки с рамкой или "solid" для кнопки с заполненным фоном. Заполнение по умолчанию — «сплошной» , за исключением области внутри панели инструментов, где значение по умолчанию — «прозрачный» .
Атрибут Заполните
Тип "Прозрачный" ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ " undefined

форма​

Описание Элемент формы HTML или идентификатор элемента формы. Используется для отправки формы, когда кнопка не является дочерним элементом формы.
Attribute form
Type HTMLFormElement ｜ string ｜ undefined
Default undefined

href​

Описание Содержит URL-адрес или фрагмент URL-адреса, на который указывает гиперссылка. Если это свойство установлено, тег привязки будет отображаться.
Attribute href
Type string ｜ undefined
Default undefined

mode​

Описание Режим определяет, какие стили платформы использовать.
Attribute mode
Type "ios" ｜ "md"
Default undefined

rel​

Описание Задает отношение целевого объекта к объекту ссылки. Значение представляет собой список типов ссылок, разделенных пробелами.
Attribute rel
Type string ｜ undefined
Default undefined

routerAnimation​

Описание При использовании роутера указывает анимацию перехода при переходе на другую страницу с помощью href .
Атрибут Не определенные
Тип (BASEEL: любой, OPTS? undefined

routerDirection

Описание При использовании маршрутизатора указывает направление перехода при переходе на другую страницу с помощью ссылка .
Attribute router-direction
Type "back" ｜ "forward" ｜ "root"
Default 'forward'

shape​

Описание Установите значение "round" для кнопки с более закругленными углами.
Attribute shape
Type "round" ｜ undefined
Default undefined

size​

Описание Установите на "маленький" для кнопки с меньшей высотой и отступом, на "по умолчанию" для кнопки с высотой и отступом по умолчанию или на "большой" для кнопки с большей высотой и отступом. По умолчанию размер не установлен, если только кнопка не находится внутри элемента, где размер по умолчанию равен «маленький» . Установите размер "по умолчанию" внутри элемента, чтобы сделать его кнопкой стандартного размера.
Attribute size
Type "default" ｜ "large" ｜ "small" ｜ undefined
По умолчанию Не определено

Стронг

Описание , если True , активирует кнопку более тяжелой Font Font.
Attribute strong
Type boolean
Default false

цель​

900 .0025 По умолчанию
Описание Указывает, где отображать связанный URL-адрес. Применяется только при наличии href . Специальные ключевые слова: "_blank" , "_self" , "_parent" , "_top" .
Атрибут Цель
Тип Строка ｜ Не определяется
undefined

type​

Описание Тип кнопки.
Attribute type
Type "button" ｜ "reset" ｜ "submit"
Default 'button'
Название Описание
ionBlur Испускается, когда кнопка теряет фокус.
ionFocus Испускается, когда кнопка имеет фокус.

Для этого компонента нет общедоступных методов.

Имя Описание
родной Собственная кнопка HTML или элемент привязки, который охватывает все дочерние элементы.
0025 -Рассказ
Name Description
--background Background of the button
--background-activated Background of the button when pressed. Примечание: установка этого параметра будет мешать пульсации Material Design.
--background-activated-opacity Непрозрачность кнопки при нажатии
--background-focused Фон кнопки при фокусировке с помощью клавиши Tab
--background-focused-opacity Непрозрачность кнопки при фокусировке с помощью клавиши Tab --background-hover Фон кнопки при наведении
--background-hover-opacity Непрозрачность фона при наведении
Цвет границы кнопки
-Радиус Границы радиуса кнопки
--BORD-STYLE 2
--BORD-STYLE --BORD-STYLE 5559 --BORD-STYLE 559 --BORD-STYL Кнопка
-графическая ширина Ширина границы кнопки
-Тэк-бокс Шах0028 Цвет текста кнопки
--color-activated Цвет текста кнопки при нажатии
--color-focused цвет кнопки при фокусе Ключ
-цветовой гонку Цвет текста кнопки при колебании
-Опсидность Необука0010 Нижний отступ кнопки
--padding-end Правый отступ, если направление слева направо, и левый отступ, если направление кнопки справа налево
444 --padding-start Отступ слева, если направление слева направо, и отступ справа, если направление кнопки справа налево
--padding-top кнопка
--ripple-color Color of the button ripple effect
--transition Transition of the button
Name Description
`` Контент помещается между именованными слотами, если предоставлен без слота.
end Содержимое размещается справа от текста кнопки в LTR и слева в RTL.
только для значка Должен использоваться на значке кнопки, не имеющей текста.
start Содержимое размещается слева от текста кнопки в LTR и справа в RTL.

Класс CSS Bulma: прозрачный

« Все классы CSS Bulma
<дел> <дел> <а href="#"> Дом <дел> <а href="#"> Более <дел> <а href="#"> Опция 1 <а href="#"> Вариант 2 <а href="#"> Вариант 3 <а href="#"> Вариант 4