Оформление кнопки css: Кнопки для сайта — 10 примеров красивых и современных эффектов

1

<button data-style="rotate-angle-bottom" data-perspective data-horizontal>Кнопка</button>

1
2
3
4
5
6
7
8

<button data-style="rotate-angle-bottom" data-perspective data-horizontal>
    <span>
        <span>Кнопка</span>
        <span>
            <span></span>
        </span>
    </span>
</button>

1
2
3
4
5
6

<button data-style="fill" data-horizontal>
    <span>Кнопка</span>
    <span>
        <span></span>
    </span>
</button>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

.progress-button {
    position: relative;
    display: inline-block;
    padding: 0 60px;
    outline: none;
    border: none;
    background: #1d9650;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1em;
    line-height: 4;
}
 
.progress-button[disabled],
.progress-button[disabled].state-loading {
    cursor: default;
}
 
. progress-button .content {
    position: relative;
    display: block;
}
 
.progress-button .content::before,
.progress-button .content::after  {
    position: absolute;
    right: 20px;
    color: #0e7138;
    font-family: "icomoon";
    opacity: 0;
    transition: opacity 0.3s 0.3s;
}
 
.progress-button .content::before {
    content: "\e600"; /* Иконка в виде птички об успешной загрузке */
}
 
.progress-button .content::after {
    content: "\e601"; /* Иконка ошибки */
}
 
.progress-button.state-success .content::before,
.progress-button.state-error .content::after {
    opacity: 1;
}
 
.notransition {
    transition: none !important;
}
 
.progress-button .progress {
    background: #148544;
}
 
.progress-button .progress-inner {
    position: absolute;
    left: 0;
    background: #0e7138;
}
 
.progress-button[data-horizontal] .progress-inner {
    top: 0;
    width: 0;
    height: 100%;
    transition: width 0.3s, opacity 0.3s;
}
 
.progress-button[data-vertical] .progress-inner {
    bottom: 0;
    width: 100%;
    height: 0;
    transition: height 0. 3s, opacity 0.3s;
}
 
/* Необходимые стили для кнопок с 3D перспективой */
 
.progress-button[data-perspective] {
    position: relative;
    display: inline-block;
    padding: 0;
    background: transparent;
    perspective: 900px;
}
 
.progress-button[data-perspective] .content {
    padding: 0 60px;
    background: #1d9650;
}
 
.progress-button[data-perspective] .progress-wrap {
    display: block;
    transition: transform 0.2s;
    transform-style: preserve-3d;
}
 
.progress-button[data-perspective] .content,
.progress-button[data-perspective] .progress {
    outline: 1px solid rgba(0,0,0,0);
}

/*Пример №1*/
<a href="#">Красная flat кнопка</a>
/*Пример №2*/
<a href="#">Бирюзовая flat кнопка</a>
/*Пример №3*/
<a href="#">Оранжевая flat кнопка</a>

.flat1 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	-webkit-user-select: none;
	border: none;
	text-align: center; //текст кнопки по центру
	outline: none;
	cursor: pointer;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #f35958; //цвет кнопки в статичном виде
	display: inline-block;
	/*Тени кнопки в статичном виде*/
	-webkit-box-shadow: 0px 3px 0px #c24746;
	-moz-box-shadow: 0px 3px 0px #c24746;
	box-shadow: 0px 3px 0px #c24746;
	}
	
. flat1:hover {
	background-color: #e65453; //цвет кнопки при наведении
	color: #fff; //цвет текста кнопки при наведении
	border: none;
	}
	
.flat1:active {
	/*Тени кнопки при нажатии*/
	-webkit-box-shadow: 0px 1px 0px #f35958;
	-moz-box-shadow: 0px 1px 0px #f35958;
	box-shadow: 0px 1px 0px #f35958;
	position: relative;
	top: 2px;
	background-color: #e65453; //цвет кнопки при нажатии
	color: #fff; //цвет текста кнопки при нажатии
	}

.flat2 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	border: none;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #1ABC9C; //цвет кнопки в статичном виде
	-webkit-transition:border .25s linear, color . 25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat2:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #20D5B1; //цвет кнопки при наведении
	border: none;
	}
	
.flat2:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #179B81; //цвет кнопки при нажатии
	border: none;
	}	

.flat-type3 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	color: #E57332; //цвет текста кнопки в статичном виде
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки в статичном виде
	border-radius: 5px; //скругление углов кнопки (в пикселях)
	background-color: #fff; //цвет кнопки в статичном виде
	-webkit-transition:border . 25s linear, color .25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat3:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #E57332; //цвет кнопки при наведении
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки при наведении
	}
	
.flat3:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #FF813A; //цвет кнопки при нажатии
	border: 2px solid #FF813A; //размер и цвет рамки/обводки кнопки при нажатии
	}

<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>

<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">

<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>
<button type="button">Большая кнопка</button>

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

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

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

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

<a href="#" role="button" aria-disabled="true">Главный линк</a>
<a href="#" role="button" aria-disabled="true">Линк</a>

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

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

<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>

) вокруг него с помощью text-align: center

---

Другие примеры

---

Панировочные сухари

Другой вариант разбивки на страницы — это так называемые «панировочные сухари»:

Пример

ул. хлебная крошка {
padding: 8px 16px;
стиль списка: нет;
цвет фона: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li + li: до {
отступ: 8 пикселей;
цвет: черный;
содержимое: «/ \ 00a0»;
}

Попробуй сам »

25+ КНОПОК CSS — Сообщество разработчиков

50+ КНОПОК CSS
https://gscode.in/css-buttons/

ПРОЧИТАЙТЕ БОЛЬШЕ САМОЛЕТ
1: 20+ Пример фоновых шаблонов CSS
2: 30+ Удивительный пример CSS-гамбургерного меню
3: 15+ Bootstrap navbar
4: 30+ Примеры стиля CSS с переключателем
5: 50+ Шаблон сетки CSS

Кнопка CSS при наведении курсора.

Креативные эффекты анимации кнопок | Только с использованием HTML и CSS

Кнопка «Креатив» | зависнуть над

Внес изменения в мое первое перо с эффектом наведения кнопки. Добавлены CSS-анимации к псевдоэлементам. Кнопка представляет собой миксин SASS.

4.

Если вам понравилась эта статья, ознакомьтесь с дополнительными примерами [gscode.in]

50+ КНОПОК CSS
https://gscode.in/css-buttons/

Эффект наведения с использованием псевдоэлементов

Нужен простой эффект наведения кнопки для вашего проекта? Вот мой список примеров.

Классная коллекция простых эффектов наведения кнопок, использующих только CSS. Профессионально и чисто. Не забудьте оставить комментарии, вопросы или замечания. Хотите увидеть больше? или есть идеи? Дай мне знать!

Потрясающие эффекты при наведении кнопки

Кнопка с легким блеском / блеском при наведении. Никаких изображений, только один элемент HTML и псевдоэлемент CSS. В духе http://codepen.io/indyplanets/pen/LejJd

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

Кнопка с простым эффектом при наведении курсора! Требуется один элемент

Игра с CSS-анимацией и эффектом наведения.

Коллекция CSS3-эффектов наведения, применяемых к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. Д. Легко применяйте к своим собственным элементам, изменяйте или просто используйте для вдохновения. Доступен в CSS, SASS и LESS.

Доступна версия 2.0 с более чем 100 эффектами .

Загрузите последнюю версию hover.css с GitHub. Эта версия CodePen останется на v1.0

.

Простые стили кнопок для быстрого старта веб-дизайна!

Создание базовой анимации с помощью теней. Никаких дополнительных элементов или даже псевдоэлементов не требуется.

Ознакомьтесь с моей коллекцией пуговиц, чтобы узнать больше.

Некоторые эффекты наведения кнопки с использованием псевдоэлементов и границ.

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

Если вам понравилась эта статья, ознакомьтесь с дополнительными примерами [gscode.in]

p> Простая идея, которую в итоге было очень сложно реализовать. В этом эксперименте не используются никакие трехмерные элементы или преобразования, только двухмерные элементы и некоторая умная математика, чтобы создать иллюзию трехмерной монеты с реальной толщиной. Я доволен результатами, учитывая ограничения HTML и CSS.

Подбрасывание монеты на самом деле тоже случайное — если вы нажмете кнопку несколько раз, вы увидите.

Confetti с использованием JS, SCSS и холста HTML5.

Футболка с пуговицей-пушкой с GreenSock.

Не знаю почему, но иногда в Chrome обрезают кончик пушки, что не идеально.

Наслаждайтесь!

50+ КНОПОК CSS
https://gscode.in/css-buttons/

ПРОЧИТАЙТЕ БОЛЬШЕ САМОЛЕТ
1: 20+ Пример фоновых шаблонов CSS
2: 30+ Удивительный пример CSS-гамбургерного меню
3: 15+ Bootstrap navbar
4: 30+ Примеры стиля CSS с переключателем
5: 50+ Шаблон сетки CSS

Руководство по стилизации кнопок

CSS | Современные решения CSS

Это выпуск №9 из серии, посвященной современным решениям CSS для проблем, которые я решал в течение последних 14 с лишним лет работы фронтенд-разработчиком .

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

Охваченные темы:

• сброс стилей для кнопок a и
• отображение, визуализация, размер и текстовые стили
• Рекомендации по доступному стилю
• расширенных стилей для общих сценариев

Эх, кнопка (или это ссылка?). Я боролся с кнопкой еще со времен задержки при наведении курсора из-за ожидания загрузки второго изображения через спрайты изображений, а затем испытал огромное облегчение, когда на сцену прибыли border-radius , box-shadow и градиенты.

Но … мы слишком далеко зашли в стилистике кнопок и где-то по ходу дела полностью упустили из виду, что на самом деле означает кнопка, не говоря уже о доступной кнопке (или ссылке).

СТОП! Прочтите эту отличную статью: Ссылки и кнопки в современных веб-приложениях, чтобы понять, когда уместно использовать кнопки , и

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

---

Сброс стилей по умолчанию #

Вот наша базовая линия — собственные стили браузера, отображаемые в Chrome, с единственными изменениями, пока что ссылка наследует настраиваемый шрифт, установленный в теле, и я также увеличил размер шрифта :

HTML-код, если вы играете дома:

.

   Ссылка на кнопку   Настоящая кнопка   

Я использовал javascript :; строка для значения href , чтобы мы могли тестировать состояния без запуска навигации.Точно так же, поскольку эта кнопка не предназначена для отправки формы, ей нужен явный тип , кнопка , чтобы предотвратить запуск запроса на получение и перезагрузку страницы.

Сброс стилей #

Примечание : Обычно я применяю сброс Normalize к CodePens, но в этом уроке мы начинаем с нуля, чтобы узнать, что требуется для сброса кнопок и ссылок. Использование Normalize или других популярных сбросов сделает некоторые из этих вещей за вас.

Во-первых, мы добавим класс button как к ссылке, так и к кнопке, чтобы подчеркнуть, где стили применяются в этом уроке.

Привет! Зарегистрируйтесь на мой семинар по CSS в июле на Smashing Conference: Level-Up With Modern CSS

   Ссылка на кнопку  
  Настоящая кнопка   

размер коробки

Убедитесь, что ваши стили включают следующий сброс — если вы не хотите его глобально (вы должны), вы можете применить его к нашему классу кнопок.

  * {
 box-size: border-box; 
}  

Вкратце, это правило не позволяет таким вещам, как границы и отступы, увеличивать ожидаемый размер элемента (например,ширина 25% остается 25%, а не 25% + ширина границы + отступы).

a

Для ссылки у нас есть только один сброс:

  a.кнопка {
 текстовое оформление: нет; 
}  

Это просто удаляет подчеркивание.

кнопка

Далее у нас есть еще несколько правил, необходимых для сброса кнопки:

  button.button {
 border: none; 
 цвет фона: прозрачный; Семейство шрифтов 
: наследование; 
 отступ: 0; 
 курсор: указатель; 
 @media screen и (-ms-high-Contrast: active) {
 border: 2px сплошной текущий цвет; 
} 
} 
  

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

С этими стилями сброса у нас теперь есть такой вид:

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

Стили отображения #

Я обнаружил, что во многих сценариях лучше всего работает display: inline-flex , который дает нам возможности выравнивания контента, как у flexbox, но находится в DOM в рамках поведения inline-block .

  a.button, 
 button.button {
 display: inline-flex; 
 align-items: center; 
 justify-content: center; 
}  

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

Визуальные стили #

Далее мы применим несколько стандартных визуальных стилей, которые вы, безусловно, можете настроить на свой вкус. Это наиболее гибкая группа стилей, и вы можете опустить box-shadow и / или border-radius .

  $ btnColor: # 3e68ff; 
 a.button, 
 button.button {
 background-color: $ btnColor; 
 цвет: #fff; 
 радиус границы: 8 пикселей; 
 box-shadow: 0 3px 5px rgba (0, 0, 0, 0,18); 
} 
  

Теперь наша ссылка и кнопка становятся более похожими:

Контрастность кнопок #

При создании начальных стилей кнопок задействовано два уровня контраста:

1. Как минимум 3: 1 между цветом фона кнопки и фоном, на котором он отображается,
2. Не менее 4. 5: 1 (для текста размером менее 18,66 пикс. Полужирного или 24 пикс.) Или 3: 1 (для текста, превышающего эти размеры) между текстом кнопки и фоном кнопки

Вот инфографика, которую я создал, чтобы продемонстрировать, как цвета кнопок соотносятся с их контрастными отношениями:

Предполагая, что фон страницы белый, наш выбор цвета кнопки проходит с соотношением 4,54: 1.

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

Хотели бы вы, чтобы советы по CSS в вашем почтовом ящике? Присоединяйтесь к моему информационному бюллетеню, чтобы получать обновления статей, советы по CSS и внешние ресурсы!

Размер #

Мы намеренно упустили одно свойство из категории «Визуальный», которое вы могли пропустить, увидев скриншот выполнения: padding .

Поскольку набивка является частью коробчатой ​​модели , мы оставили ее для секции размеров.

Давайте применим значения размера, а затем обсудим:

  а.button, 
 button.button {
 padding: 0,25em 0,75em; 
 мин-ширина: 10 каналов; 
 min-height: 44px; 
}  

Мы применяем отступ с использованием единиц em , что является предпочтением, которое позволяет пропорционально изменять размер отступа с примененным размером шрифта .

Затем мы устанавливаем min-width с использованием блока ch , который примерно равен ширине символа 0 применяемого шрифта и font-size .Эта рекомендация — визуальный барьер ритма. Рассмотрим сценарий, в котором у вас есть две расположенные рядом кнопки с одной короткой и одной длинной метками, например. «Поделиться» и «Узнать больше». Без min-width кнопка «Поделиться» была бы резко короче, чем «Узнать больше».

Минимальная высота основана на том, чтобы кнопка была достаточно большой целью на сенсорных устройствах, чтобы соответствовать критериям успеха WCAG 2.1 для 2.5.5 — Размер цели.

Стили начинают объединяться, но мы еще не закончили:

Стили текста #

Судя по последнему снимку экрана, у вас может возникнуть соблазн пропустить стили текста.

Но посмотрите, что происходит, когда мы уменьшаем размер области просмотра и запускаем адаптивное поведение:

Как видите, у нас другое выравнивание, и высота строки также может быть отрегулирована.

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

  a. Кнопка, 
 кнопка.кнопка {
 выравнивание текста: по центру; 
 line-height: 1. 1; 
}  

Отлично, выглядит отлично!

Государственные стили #

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

Нам нужно обеспечить наличие трех состояний.

: парение #

Обычно наибольшее внимание привлекает hover , так что мы начнем с него.

Типичное обновление при наведении курсора — это изменение цвета фона. Поскольку мы были довольно близки к 4,5, нам нужно затемнить цвет.

Мы можем воспользоваться Sass, чтобы вычислить этот цвет, используя переменную $ btnColor , которую мы определили в разделе «Визуализация»:

  a.button, 
 button.button {
 &: hover {
 background-color: scale-color ($ btnColor, $ lightness: -20%); 
} 
}  

Эффект немного резкий, но у нас есть еще один современный инструмент CSS, чтобы смягчить его, метко названный transition . Свойство transition необходимо будет добавить вне правила hover , чтобы оно применялось как для «over», так и «out».

  a.button, 
 button.button {
 transition: 220ms all easy-in-out; 
 
 
} 
  

: фокус #

Для пользователей клавиатуры мы должны убедиться, что состояние focus четко различимо.

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

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

  a.button, 
 button.button {
 &: focus {
 outline-style: solid; 
 цвет контура: прозрачный; 
 box-shadow: 0 0 0 4px scale-color ($ btnColor, $ lightness: -40%); 
} 
} 
  

И снова мы использовали функцию scale-color , на этот раз сделав ее даже немного темнее, чем цвет hover . Это связано с тем, что кнопка может одновременно находиться в состояниях наведения и фокусировки .

Благодаря @overflowhidden за предоставление решения для обеспечения воспринимаемого состояния : focus для пользователей с включенным режимом высокой контрастности Windows .

: активный #

Наконец, особенно для «реальной кнопки», лучше всего определить стиль состояния : активный .

Для ссылок это появляется на короткое время во время «вниз» щелчка / касания.

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

Мы добавим : active к существующему : hover style:

  &: hover, 
 &: active {
 background-color: scale-color ($ btnColor, $ lightness: -20%); 
}  

Варианты стиля #

Тема выделенных («призрачных») кнопок — это тема для другого дня, но есть два варианта, которые мы быстро добавим.

Маленькие пуговицы #

Используя формат БЭМ, мы создадим кнопку - маленький класс , чтобы просто уменьшить размер шрифта. Поскольку мы устанавливаем отступ на на , размер будет пропорционально изменен. А наша минимальная высота гарантирует, что кнопка останется достаточно большой мишенью для касания.

  & - small {
 font-size: 1.15rem; 
}  

Блок кнопок #

Могут быть случаи, когда вы хотите, чтобы поведение block вместо встроенного, поэтому мы добавим width: 100% , чтобы разрешить эту опцию вместо изменения display prop, поскольку мы все еще хотим выравнивание гибкости для содержимого кнопки :

  & - блок {
 ширина: 100%; 
}  

Попался: дочерний элемент Flex Columns #

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

Для защиты от этого сценария в будущем можно добавить align-self: start к базовым стилям кнопок или создать служебные стили для каждого из значений свойств выравнивания гибкости / сетки: start , center и конец .

Демо #

Стефани Эклс (@ 5t3ph)

Методы и ресурсы — Smashing Magazine

Об авторе

Янко Йованович — дизайнер пользовательского интерфейса, инженер-программист, блоггер, спикер и художник.В свободное время он пишет о пользовательских интерфейсах в своем блоге … Больше о Янко ↬

Кнопки, независимо от их назначения, являются важными элементами дизайна. Они могут быть конечной точкой веб-формы или призывом к действию. У дизайнеров есть много причин для стилизации кнопок, в том числе для того, чтобы сделать их более привлекательными и повысить удобство использования. Однако одна из наиболее важных причин заключается в том, что стандартные кнопки могут быть легко пропущены пользователями , потому что они часто похожи на элементы в их операционной системе.Здесь мы представляем вам несколько приемов и руководств, которые помогут вам научиться стилизовать кнопки с помощью CSS. Мы также коснемся удобства использования. Прежде чем мы объясним, как стилизовать кнопки, давайте проясним распространенное заблуждение: кнопки не являются ссылками. Основная цель ссылки — перемещаться между страницами и представлениями, тогда как кнопки позволяют выполнять действие (например, отправлять форму).

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

Возможно, вы захотите взглянуть на следующие статьи по теме:

Links vs.кнопки

Прежде чем мы объясним, как стилизовать кнопки, давайте проясним распространенное заблуждение: кнопки не являются ссылками. Основная цель ссылки — перемещаться между страницами и представлениями, тогда как кнопки позволяют выполнять действие (например, отправлять форму).

В одной из своих статей Якоб Нильсен пишет о командных ссылках, которые представляют собой смесь ссылок и кнопок. Но он рекомендовал ограничить командные ссылки действиями с незначительными последствиями и второстепенными командами. Чтобы узнать больше о первичных и вторичных командах (и действиях), посмотрите «Первичные и вторичные действия в веб-формах» Люка Вроблевски.Чтобы узнать больше о различиях между ссылками и кнопками, прочтите «Создание полезных ссылок и кнопок» на UXBooth.

Basic Styling

Самый простой способ стилизовать ссылки и кнопки — это добавить цвет фона, отступы и границы. Ниже приведены примеры кода для ссылки, button и input элементов («Отправить»).

   Образец кнопки 
   Образец кнопки 
    

 .кнопка {
  отступ: 5 пикселей;
  цвет фона: #dcdcdc;
  граница: 1px solid # 666;
  цвет: # 000;
  текстовое оформление: нет;
}  

Этот простой код минимизирует визуальные различия между ссылками и кнопками. А вот визуализированные примеры кода выше:

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

Изображения

Добавление изображений к кнопкам может сделать кнопки более заметными.Иногда само изображение ясно передает назначение кнопки ; например значок лупы для поиска или значок дискеты для сохранения. Самый простой способ добавить изображение к кнопке — использовать фоновое изображение и затем расположить его соответствующим образом. Ниже приведены наши примеры со значком галочки.

  .button {
  отступ: 5px 5px 5px 25px;
  граница: 1px solid # 666;
  цвет: # 000;
  текстовое оформление: нет;
  фон: #dcdcdc url (icon.png) прокрутка без повтора 5 пикселей по центру;
}  

Состояния кнопок

Помимо состояния по умолчанию, кнопки и ссылки могут иметь два других состояния: при наведении курсора и активное (т.е.е. нажал). Важно, чтобы кнопки в разных состояниях выглядели по-разному, чтобы пользователи понимали, что происходит. Любому элементу в состоянии наведения можно задать стиль, вызвав псевдокласс : hover CSS.

  a: hover {
  цвет: # f00;
}  

Хотя это очень важно, активное состояние редко реализуется на веб-сайтах. Показывая это состояние, вы гарантируете, что ваши кнопки реагируют и посылаете пользователям визуальный сигнал о том, что кнопка была нажата. Это называется изоморфным соответствием , и это «взаимосвязь между внешним видом визуальной формы и сопоставимым человеческим поведением» (Люк Вроблевски, Site-Seeing).В статье «Состояние нажатой кнопки с помощью CSS» подробно рассказывается о важности активного состояния.

  a: активный {
  цвет: # f00;
}  

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

  a: focus {
  цвет: # f00;
}  

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

Нам следует поговорить о том, как обрабатывать свойство контура для состояний : active и : focus . Правильное обращение с этим свойством важно для опыта пользователей, которые используют как клавиатуру, так и мышь. В статье «Лучшее подавление контуров CSS» Патрик Лаук показывает, как кнопки и ссылки ведут себя в различных комбинациях состояний, и объясняет, почему свойство контура должно вызываться только с состоянием : active .

Синяя кнопка «Купить сейчас» на Apple.com имеет немного более светлый фон для состояния наведения и стиль вставки для активного состояния. Даже основная кнопка навигации на веб-сайте Apple реализует все три состояния.

Хотя она не реализует активное состояние, эта модная кнопка на Tea Round имеет приятный эффект затухания при наведении курсора.

Кнопка «Подробнее» на UX Booth становится зеленой при наведении курсора и перемещается на один пиксель вниз в активном состоянии, что имитирует эффект нажатия кнопки.

Полезное чтение

В статье «Повторное открытие элемента кнопки» показаны различия между ссылками и кнопками и объясняется, как легко стилизовать кнопки.

Стилизация кнопок формы охватывает основы стилизации кнопок с множеством примеров.

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

Воссоздание кнопки — очень хорошая статья, в которой объясняется, как Google получил кнопки, которые он использует на большинстве своих веб-сайтов.

Масштабируемые кнопки CSS с использованием PNG и цветов фона объясняет, как создавать действительно потрясающие кнопки для всех состояний. Хотя он использует jQuery, он постепенно ухудшается, если JavaScript отключен.

Раздвижные двери: гибкие кнопки

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

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

    Типичная кнопка раздвижных дверей    

  a {
  фон: прозрачный url ('button_right.png ') без повтора прокрутка вверху справа;
  дисплей: блок;
  плыть налево;
  / * здесь отступы, поля и другие стили * /
}
a span {
  фон: прозрачный url ('button_left.png') без повтора;
  дисплей: блок;
  / * здесь отступы, поля и другие стили * /
}  

Преимущества этого метода заключаются в том, что он:

• Это простой способ создания визуально насыщенных кнопок;
• Обеспечивает доступность, гибкость и масштабируемость;
• Не требует JavaScript;
• Работает во всех основных браузерах.

Полезное чтение

Статья «Раздвижные двери CSS» в A List Apart (часть 1 и часть 2) охватывает основы этой техники. Хотя эти статьи немного устарели, их должен прочитать каждый веб-разработчик.

Также немного устарел, «Создание пуленепробиваемых графических кнопок ссылок с помощью CSS» — отличная статья, в которой показано, как создавать пуленепробиваемые кнопки с изменяемым размером и сжатием. Также обязательно к прочтению.

Filament Group предлагает множество отличных статей и руководств.Вторая статья о кнопках CSS «Стилизация элемента кнопки с помощью раздвижных дверей CSS» объясняет, как создавать кнопки, комбинируя методы. Хотя он не поддерживает активное состояние, его можно легко расширить.

Если вам нужны кнопки, похожие на Wii, статья «Простые круглые ссылки CSS (кнопки Wii)» предоставляет все необходимые ресурсы и объяснения, как их стилизовать.

Распространенным способом достижения техники раздвижных дверей CSS является использование двух изображений. Однако статья CSS Sliding Door Using Only One Image показывает, что можно добиться того же эффекта только с одним изображением.

Овальные кнопки CSS и квадратные кнопки CSS от Dynamic Drive — две другие статьи, которые демонстрируют эффективность раздвижных дверей CSS.

CSS-спрайты: одно изображение, не много

При использовании CSS-спрайтов один файл изображения содержит несколько графических элементов , обычно расположенных в виде сетки. Размещая изображение мозаикой, мы показываем только один спрайт за раз. Что касается кнопок, мы можем включить графику для всех трех состояний в один файл. Этот метод эффективен, поскольку требует меньше ресурсов и страница загружается быстрее.Все мы знаем, что выполнение многих запросов к серверу для нескольких небольших ресурсов может занять много времени. Вот почему CSS-спрайты так удобны. Они значительно сокращают количество обращений к серверу. Они настолько мощны, что некоторые разработчики используют CSS-спрайты для всей своей графики. Обзор Holy Sprites по CSS Tricks предлагает несколько очень креативных решений.

Пример ниже показывает простейшее использование CSS-спрайтов. Одно изображение содержит графику для всех трех состояний кнопки. Регулируя свойство background-position , мы определяем точное положение фонового изображения, которое нам нужно.Изображение, которое мы выбрали для показа, соответствует положению фона: сверху: -30px и слева: 0 .

  а {
  фон: белый url (buttons.png) 0px 0px без повтора;
}
a: hover {
  background-position: -30px 0px;
}
a: active {
  background-position: -60px 0px;
}  

Для получения общей информации и ресурсов по CSS-спрайтам, ознакомьтесь с Тайной CSS-спрайтов: методы, инструменты и руководства ».

Полезное чтение

В этом простом руководстве «Как создать простую кнопку с помощью CSS-спрайтов изображений» Крис Спунер объясняет, как создать изображение CSS-спрайтов в Photoshop и использовать его с CSS.

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

CSS 3: Кнопки будущего

CSS 3 позволяет нам создавать визуально насыщенные кнопки с помощью всего нескольких строк кода. Пока что это самый простой способ создания кнопок. Обратной стороной CSS 3 является то, что в настоящее время он поддерживается только Firefox и Safari.Положительным моментом является то, что кнопки, стилизованные под CSS 3 , изящно ухудшаются в неподдерживаемых браузерах . Используя свойства браузера -moz-border-radius (для Firefox) или -webkit-border-radius (для Safari), вы можете определить радиус углов. Вот несколько примеров того, что можно сделать с помощью свойства радиуса границы.

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

По сравнению с раздвижными дверями этот метод намного проще. Однако, если вы хотите сохранить визуальную согласованность во всех браузерах, используйте раздвижные двери, потому что это работает во всех основных браузерах, включая IE6. Чтобы узнать больше о возможностях CSS 3, прочтите «Интересные функции и возможности CSS 3: 30+ полезных руководств». А вот несколько хороших руководств по стилизации кнопок с помощью функций CSS 3.

Полезное чтение

Super Awesome Buttons With CSS 3 и RGBA демонстрирует мощь CSS 3 с закругленными углами, тенями Mozilla и RGBA, который представляет собой цветовой режим, который добавляет альфа-смешение к вашим любимым свойствам CSS.Это один из лучших примеров кнопок CSS 3.

Создание кнопок без изображений с помощью CSS 3 объясняет недостатки использования изображений для кнопок и показывает несколько вариантов создания кнопок CSS 3 без изображений.

Мгновенные инструменты: полезны ли они?

Существуют инструменты для создания кнопок, такие как Easy Button и Menu Maker и My Cool Button, а также для создания CSS-спрайтов, таких как CSS Sprite Generator, но вопрос в том, действительно ли они помогают создавать кнопки, соответствующие вашим потребностям.Несмотря на то, что они настраиваются и просты в использовании, ваше творчество и контроль над результатами ограничены, что делает кнопки среднего вида. Использование универсальных кнопок — не лучшая идея.

Решение — использовать Photoshop (или бесплатную альтернативу) и проверенные методы, описанные в этой статье. Если вы новичок в Photoshop, вот несколько отличных руководств по созданию удивительных кнопок.

Если вы не знаете, с чего начать, кнопка «Нравится» на iPhone в Photoshop — идеальный выбор.Всего за 10-15 минут вы сможете создавать кнопки, которые можно увидеть на iPhone.

Как создать гладкую и чистую кнопку в Photoshop — это очень подробное руководство, которое проведет вас через 30 простых шагов и поможет вам изучить основы Photoshop. Кроме того, в статье объясняется, как использовать эту графику в сочетании с HTML и CSS для создания полнофункциональных кнопок CSS.

Кнопки и удобство использования: вместо заключения

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

1. Сначала рассмотрите маркировку. Всегда метит кнопки с названием действия, которое пользователь выполняет . И всегда делайте это глаголом. Распространенной ошибкой является обозначение кнопок «Перейти» для различных действий, таких как поиск, отправка электронной почты и сохранение. Этикетки также должны быть краткими и по существу; не нужно загромождать пользовательский интерфейс.
2. Как уже упоминалось, включите все состояния кнопок (по умолчанию, при наведении, активно), чтобы предоставить пользователю четкие визуальные подсказки относительно того, что происходит.Контуры кнопок должны оставаться только в активном состоянии.
3. Четкое различие между первичными и вторичными действиями . Самое важное действие должно быть самым заметным. Обычно это делается путем присвоения первичным и вторичным действиям разных цветов.
4. Обратите особое внимание на согласованность . Кнопки должны быть согласованы во всем веб-приложении как визуально, так и по поведению. Используйте раздвижные двери CSS для повторно используемых кнопок или закругленные углы CSS 3 для сохранения единообразия.
5. Хотя это очевидно, следует отметить, что вся область кнопок должна быть интерактивной.

Создание полезных ссылок и кнопок объясняет, почему пользователи иногда ожидают кнопки, а в других случаях — ссылки. Он также показывает, как выбирать между двумя элементами.

Как создавать кнопки для повышения удобства использования объясняет некоторые принципы удобства использования, которые следует учитывать при разработке кнопок. Он охватывает основы использования значков, внешнего вида, поведения, иерархии и согласованности.

(al)

css — Как сделать HTML-ссылку похожей на кнопку?

Сильно запоздалый ответ:

Я боролся с этим время от времени с тех пор, как впервые начал работать в ASP.Вот лучшее, что я придумал:

Концепция

: я создаю настраиваемый элемент управления с тегом. Затем в кнопку я помещаю событие onclick, которое устанавливает для document.location желаемое значение с помощью JavaScript.

Я назвал элемент управления ButtonLink, чтобы меня легко запутать с LinkButton.

aspx:

  <% @ Control Language = "VB" AutoEventWireup = "false" CodeFile = "ButtonLink.ascx.vb" Inherits = "controls_ButtonLink"%>


  

код позади:

  Элементы управления частичным классом_ButtonLink
Наследует System.Web.UI.UserControl

Dim _url как строка
Dim _confirm As String

Публичное свойство NavigateUrl как строка
    Получать
        Возврат _url
    Конец получить
    Установить (значение как строка)
        _url = значение
        BuildJs ()
    Конец набора
Конечная собственность
Публичное свойство подтверждается как строка
    Получать
        Возврат _confirm
    Конец получить
    Установить (значение как строка)
        _confirm = значение
        BuildJs ()
    Конец набора
Конечная собственность
Текст общедоступного свойства в виде строки
    Получать
        Кнопка возврата. Текст
    Конец получить
    Установить (значение как строка)
        кнопка.Текст = значение
    Конец набора
Конечная собственность
Общедоступное свойство включено как логическое
    Получать
        Кнопка возврата.
    Конец получить
    Установить (значение как логическое)
        button.Enabled = значение
    Конец набора
Конечная собственность
Публичное свойство CssClass как строка
    Получать
        Кнопка возврата.
    Конец получить
    Установить (значение как строка)
        button.CssClass = значение
    Конец набора
Конечная собственность

Sub BuildJs ()
    Это небольшая путаница в том смысле, что, если пользователь дает URL-адрес и сообщение с подтверждением, мы дважды создадим строку onclick.«Но это не так уж важно.
    Если String.IsNullOrEmpty (_url) Тогда
        button.OnClientClick = Ничего
    ElseIf String.IsNullOrEmpty (_confirm) Тогда
        button.OnClientClick = String.Format ("document.location = '{0}'; return false;", ResolveClientUrl (_url))
    Еще
        button.OnClientClick = String.Format ("if (confirm ('{0}')) {{document.location = '{1}';}} return false;", _confirm, ResolveClientUrl (_url))
    Конец, если
Конец подписки
Конец класса
  

Достоинства схемы: Похоже на контрольную.Вы пишете для него один тег:

Получившаяся кнопка представляет собой «настоящую» кнопку HTML и поэтому выглядит так же, как настоящая кнопка. Вам не нужно пытаться имитировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами в разных браузерах.

Хотя возможности ограничены, вы можете легко расширить его, добавив дополнительные свойства. Скорее всего, большинству свойств придется просто «передать» нижележащую кнопку, как я сделал для text, enabled и cssclass.

Если у кого-нибудь есть решение попроще, чище или лучше, я был бы рад его услышать. Это больно, но это работает.

ссылок для стилизации в стильные кнопки | Учебник CSS

Ссылки используются для связывания связанных веб-страниц. В HTML тег привязки используется для создания гиперссылок. Мы уже научились стилизовать ссылку на основе ее состояния, а именно: наведение , ссылка , посетил и активен .

В этом руководстве мы узнаем, как сделать ссылки похожими на прямоугольные кнопки, точно так же, как мы видим кнопки «Отправить» в формах, кнопки «Далее» и «Назад» в конце этого руководства, гиперссылку «Живой пример» и т. Д.

Если у нас есть два класса стилей с разными правилами стилей, мы можем добавить их оба вместе в один тег. Вот clickme class,

CSS:

  .clickme {
    цвет фона: #EEEEEE;
    отступ: 8 пикселей 20 пикселей;
    текстовое оформление: нет;
    font-weight: жирный;
    радиус границы: 5 пикселей;
    курсор: указатель;
}  

Выход:

clickme — это класс стилей, который обеспечивает некоторые базовые стили для ссылки, такие как заполнение, удаление подчеркивания и т. Д., Чтобы она выглядела как простая старая кнопка.Но да, основная задача по преобразованию ссылки в кнопку выполнена.

Живой пример →

Теперь мы добавим больше классов стилей поверх базового класса clickme , чтобы создавать красочные кнопки.

Красная кнопка → . Опасность класс

  .danger {
    цвет фона: # FF0040;
    цвет: #FFFFFF;
}

.danger: hover {
    цвет фона: # EB003B;
    цвет: #FFFFFF;
}  

HTML:

  

     class  ="  clickme dangerous  "> Тесты 
 

Выход:

Посмотрите объединенный код вживую на веб-площадке и даже попробуйте изменить несколько свойств CSS.

Живой пример →

---

Финал! Полный набор стильных кнопок CSS

В этот набор кнопок мы добавили 5 цветов uinque, используя 5 различных классов стилей CSS, а именно опасность , успех , предупреждение , информация , по умолчанию .

Вы можете изменить цвета в соответствии с темой вашего веб-сайта или даже добавить к нему дополнительные классы цветов. Теперь перейдите на веб-площадку , чтобы увидеть полный код в действии.

Выход:

Живой пример →

Надеемся, вам понравилось это упражнение. И потренируйтесь на нашей живой веб-площадке (ссылка) и поделитесь с нами своими проектами стиля, сделав снимок результатов на нашей странице в Facebook. Ага!

---

---

Как кодировать кнопки со смещенными границами

Время от времени я просматриваю последние выпуски ThemeForest, чтобы не отставать от тенденций дизайна и видеть, что продается на отраслевых рынках.Мое внимание привлек PSD-файл под названием United Forms Creative Agency.

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

Шаг 1: Сделайте розовую ссылку в виде кнопки и забудьте на данный момент о смещенной границе

Нашим первым шагом будет просто закодировать ссылку с розовым фоном, белым текстом и закругленными углами. Следующий CSS приведет нас туда:

См. «Смещенная рамка кнопки пера до смещенной границы», автор - Леланд Фигель (@leland) на CodePen

Будет выполнен стиль следующего HTML: Щелкните меня, пожалуйста . Эта разметка не изменится на протяжении всего урока. Мы хотим убедиться, что наш CSS выполняет тяжелую работу.

Шаг 2: Добавьте смещенную границу

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

Мы можем добиться этого с помощью псевдоклассов CSS, абсолютного позиционирования и процентной ширины и высоты.

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

Пока мы здесь, мы убедимся, что оба тоже используют border-box. Без этого наше позиционирование в дальнейшем станет немного странным.

Мы получаем следующий CSS:

И, конечно же, та же разметка, чтобы в итоге получилось:

См. «Рамка кнопки смещенной ручки», автор - Леланд Фигель (@leland) на CodePen.

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

Построчная разбивка по CSS

Это не было бы большим учебным пособием, если бы я просто дал вам код и не объяснил, как я к нему пришел, так что вот построчная разбивка, разбитая на каждый селектор.

. Смещенный-бордюр {…}

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

фон: # FB3FDE;

Обеспечивает ссылку розовым цветом фона. Он соответствует цвету «смещенной границы» ниже, о которой мы поговорим позже.

цвет: #fff;

Обеспечивает белый цвет текста ссылки.

дисплей: строчно-блочный;

Элементы привязки (теги «a», используемые для ссылок) по умолчанию являются встроенными элементами. Изменив это на inline-block, мы получим больше контроля над заполнением, которое придает кнопке красивый и пухлый вид.Удалите эту строку в разветвленном CodePen, чтобы понять, что я имею в виду.

отступ: 15 пикселей 20 пикселей 14 пикселей;

15 пикселей отступа сверху. 20 пикселей отступа слева и справа. 14 пикселей отступа внизу. Это не совсем необходимо для создания эффекта, но ссылка выглядела бы плохо, если бы в ней не было отступов, при этом текст был бы прижат ко всему. Это также связано с приведенным выше CSS «inline-block». Без него эти числа для заполнения не применялись бы.

семейство шрифтов: без засечек;

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

оформление текста: нет;

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

позиция: относительная;

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

.dislodged-border,

.dislodged-border: до {…}

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

радиус границы: 30 пикселей;

Эффект «смещенной границы» основан на точно таком же закруглении углов. Так что это идеальное место для его определения.

размер коробки: рамка-рамка;

Многие веб-сайты объявляют размер рамки для всех элементов, поэтому, если это так, где бы вы ни реализовали эти стили смещенных границ, в этой строке нет необходимости.

.dislodged-border: до {…}

Эти стили - сердце и душа смещенной границы.

граница: сплошная 2px # FB3FDE;

Сплошная рамка шириной 2 пикселя того же розового цвета, что использовалась ранее.

содержание: «»;

Это минимум, который вам нужен, чтобы получить псевдоэлемент для реального отображения чего-либо.

дисплей: блочный;

Относится к приведенному выше комментарию «абсолютный минимум».

высота: 100%; ширина: 100%;

Это то, что гарантирует, что наша смещенная граница остается относительно размеров родительского элемента привязки.

позиция: абсолютная; верх: 5 пикселей; слева: 3 пикселя;

При этом смещенная граница размещается на 5 пикселей сверху и на 3 пикселя слева от родительского элемента привязки.

No related posts.