Как для кнопки добавить галочку css

Как оформить кнопки с помощью CSS

Кнопки с оформлениями помогают создавать красивые и интересные веб-страницы. Есть множество стилей, которые можете применить к кнопкам. Смотрите инструкцию.

1. Создайте

Прежде всего создайте элемент .

button type="button">Submitbutton>

Многие разработчики также используют теги , , или .

2. Оформите кнопку. Сейчас можете применить стили к вашим кнопкам с помощью класса.

button < display: inline-block; background-color: #7b38d8; border-radius: 10px; border: 4px double #cccccc; color: #eeeeee; text-align: center; font-size: 28px; padding: 20px; width: 200px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; cursor: pointer; margin: 5px; >

3.Оформите выделенное состояние (hover state).

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

button:hover < background-color: green; >

А сейчас рассмотрим интересный пример, где использован элемент :

Пример

html> html> head> title>Заголовок документа title> style> button < display: inline-block; background-color: #7b38d8; border-radius: 10px; border: 4px double #cccccc; color: #eeeeee; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; > button span < cursor: pointer; display: inline-block; position: relative; transition: 0.5s; > button span:after < content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; > button:hover < background-color: #f7c2f9; > button:hover span < padding-right: 25px; > button:hover span:after < opacity: 1; right: 0; > style> head> body> h2>Style buttons h2> button> span>Submit span> button> body> html>

Давайте рассмотрим и другие примеры оформленных кнопок:

В следующем примере использован элемент .

Пример

html> html> head> title>Заголовок документа title> style> body < background: #560059; color:#eeeeee; font-family:Arial; font-size:16px; > .wrapper < margin: 80px auto; text-align: center; width: 100%; position: relative; > .button < padding: 15px 100px; margin:10px 4px; color: #eee; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; border:1px solid ; > .button::before< content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: -1; -webkit-transform: scaleY(.1); transform: scaleY(.1); transition: all .4s > .button:hover< color:#b414ba; > .button:hover::before< opacity: 1; background-color: #f7c2f9; -webkit-transform: scaleY(1); transform: scaleY(1); transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s; transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity > style> head> body> div class="wrapper"> span class="button">Button 1 span> span class="button">Button 2 span> div> body> html>

Здесь использован элемент .

Пример

html> html> head> title>Заголовок документа title> style> body < background: #3b0044; color:#6098FF; font-family:sans-serif; font-size:16px; > .wrapper < margin: 80px auto; text-align: center; width: 100%; position: relative; > .button < padding: 15px 100px; margin:10px 4px; color: #ffffff; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; > .button< border:1px solid transparent; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1); > .button::before < content: ''; position: absolute; left: 0px; bottom:0px; z-index:-1; width: 0%; height:1px; background: #003177; box-shadow: inset 0px 0px 0px #b6cdef; display: block; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1) > .button:hover::before < width:100%; > .button::after < content: ''; position: absolute; right: 0px; top:0px; z-index:-1; width: 0%; height:1px; background: #a9c1e8; -webkit-transition: all 0.4s cubic-bezier(.7, .25, 0, 1); transition: all 0.4s cubic-bezier(.7, .25, 0,1) > .button:hover::after < width:100%; > .button:hover< border-left:1px solid #b6cdef; border-right:1px solid #6098FF; > style> head> body> div class="wrapper"> a href="#" class="button">Button 1 a> a href="#" class="button">Button 2 a> div> body> html>

В следующем примере мы использовали элемент :

Пример

html> html> head> title>Заголовок документа title> style> .container < position: absolute; top: 10%; > .button < border: none; display: block; text-align: center; cursor: pointer; text-transform: uppercase; outline: none; overflow: hidden; position: relative; color: #eeeeee; font-weight: 600; font-size: 15px; background-color: #153f00; padding: 15px 50px; margin: 0 auto; > .button span < position: relative; z-index: 1; > .button:after < content: ""; position: absolute; left: 0; top: 0; height: 470%; width: 140%; background: #52b71f; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg); transform: translateX(-100%) translateY(-25%) rotate(45deg); > .button:hover:after < -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); > style> head> body> h2>Style button h2> div class="container"> button type="button" class="button"> span>Hover! span> button> div> body> html>

Еще один пример с элементом :

Пример

html> html> head> title>Заголовок документа title> style> body < font-size: 60%; background: #00abb7; > .container < padding: 50px; > button, button::after < -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; > button < background: none; border: 4px solid #fff; border-radius: 10px; color: #fff; display: block; font-size: 1.6em; font-weight: bold; margin: 10px auto; padding: 2em 6em; position: relative; text-transform: uppercase; > button::before, button::after < background: #fff; content: ''; position: absolute; z-index: -1; > button:hover < color: #29f2e4; > .button1::after < height: 0; left: 0; top: 0; width: 100%; > .button1:hover:after < height: 100%; > .button2::after < height: 100%; left: 0; top: 0; width: 0; > .button2:hover:after < width: 100%; > .button3::after < height: 0; left: 50%; top: 50%; width: 0; > .button3:hover:after < height: 100%; left: 0; top: 0; width: 100%; > style> head> body> div class="container"> button type="button" class="button1">Button 1 button> button type="button" class="button2">Button 2 button> button type="button" class="button3">Button 3 button> div> body> html>

В следующем примере использован элемент :

Пример

html> html> head> title>Заголовок документа title> style> input < padding: 15px 100px; margin:10px 4px; cursor: pointer; text-transform: uppercase; text-align: center; position: relative; > input:hover < opacity:0.5;> style> head> body> input type="button" value="Button"/> body> html>

Стилизация кнопок CSS

Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.

Скругленная кнопка

Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 0 25px; margin: 0 15px 15px 0; outline: none; border: 1px solid #fff; border-radius: 50px; height: 46px; line-height: 46px; font-size: 14px; font-weight: 600; text-decoration: none; color: #444; background-color: #fff; box-shadow: 0 4px 6px rgb(65 132 144 / 10%), 0 1px 3px rgb(0 0 0 / 8%); cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; vertical-align: top; transition: box-shadow 0.2s; >.btn:focus-visible < border: 1px solid #4c51f9; outline: none; >.btn:hover < transition: all 0.2s; box-shadow: 0 7px 14px rgb(65 132 144 / 10%), 0 3px 6px rgb(0 0 0 / 8%); >.btn:active < background-color: #808080; >.btn:disabled

Результат:

Двойная рамка

Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 1px; margin: 0 15px 15px 0; outline: none; border: 1px solid #F18230; border-radius: 25px; height: 46px; line-height: 0; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #fff; position: relative; overflow: hidden; vertical-align: top; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn span < display: block; box-sizing: border-box; padding: 0 25px; height: 42px; line-height: 38px; border: 1px solid #F18230; border-radius: 25px; font-size: 14px; color: #FFFFFF; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #F18230; text-align: center; font-weight: 600; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover span < background-color: #fba768 >.btn:active span < background-color: #c17237 !important; >.btn:disabled

Результат:

Yahoo

Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 0 20px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #3775dd; box-shadow: 0 2px #21487f; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; vertical-align: top; >.btn:hover < background-color: #002fed; >.btn:active < background-color: #2f599e !important; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:disabled

Результат:

Google

Link Disabled

const buttons = document.querySelectorAll(".btn"); buttons.forEach((button) => < button.onclick = function(e)< let x = e.clientX - e.target.offsetLeft; let y = e.clientY - e.target.offsetTop; let ripple = document.createElement("span"); ripple.style.left = `$px`; ripple.style.top = `$px`; this.appendChild(ripple); setTimeout(function()< ripple.remove(); >, 600); > >);

.btn < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 36px; line-height: 36px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #1a73e8; position: relative; overflow:hidden; vertical-align: top; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; z-index: 1; >.btn span < position: absolute; background: #fff; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; animation: btn_ripples 0.6s linear infinite; >@keyframes btn_ripples < 0% < width: 0px; height: 0px; opacity: 0.5; >100% < width: 1000px; height: 1000px; opacity: 0; >> .btn:hover < box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 1px 3px 1px rgb(26 115 232 / 30%); background-color: #297be6; >.btn:active < box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 2px 6px 2px rgb(26 115 232 / 30%); background-color: #1a73e8 !important; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:disabled

Результат:

Whatsapp

Link Disabled Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 0 24px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 3px; height: 37px; line-height: 37px; font-size: 14px; text-transform: uppercase; font-weight: normal; text-decoration: none; color: #07bc4c; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf; >.btn:active < background-color: #efefef !important; >.btn:disabled < background-color: #eee; color: #444; pointer-events: none; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 24px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 3px; height: 37px; line-height: 37px; font-size: 14px; text-transform: uppercase; font-weight: normal; text-decoration: none; color: #fff; background-color: #05cd51; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf; >.btn-2:active < background-color: #058c38 !important; >.btn-2:disabled

Результат:

Facebook

Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 0 20px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 6px; height: 40px; line-height: 40px; font-size: 17px; font-weight: 600; text-decoration: none; color: #385898; background-color: #e7f3ff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus-visible < box-shadow: 0 0 0 2px #666; >.btn:hover < background-color: #DBE7F2; >.btn:active < transform: scale(0.96); >.btn:disabled

Результат:

Вконтакте

Link Disabled Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 0 16px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 30px; line-height: 30px; font-size: 12.5px; font-weight: normal; text-decoration: none; vertical-align: top; color: #55677d; background-color: #dfe6ed; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; overflow: hidden; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < opacity: 0.88; >.btn:active < line-height: 32px; >.btn:disabled < pointer-events: none; opacity: 0.65; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 16px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 30px; line-height: 30px; font-size: 12.5px; font-weight: normal; text-decoration: none; vertical-align: top; color: #fff; background-color: #5181b8; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; overflow: hidden; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < opacity: 0.88; >.btn-2:active < line-height: 32px; >.btn-2:disabled

Результат:

Habr

Link Disabled Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 0 13px; margin: 0 15px 15px 0; outline: none; border: 1px solid #a4afba; border-radius: 3px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #838a92; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < border-color: #65a3be; color: #4e879c; >.btn:active < border-color: #78a2b7 !important; color: #3a728b !important; >.btn:disabled < background-color: #eee; color: #444; pointer-events: none; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 13px; margin: 0 15px 15px 0; outline: none; border: 1px solid transparent; border-radius: 3px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #65a3be; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < border-color: transparent; background-color: #4986a1; color: #fff; >.btn-2:active < border-color: #6f9cbc !important; background-color: #367089 !important; >.btn-2:disabled

Результат:

Bootstrap

Link Disabled Link Disabled

.btn < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: 1px solid #6c757d; border-radius: 5px; height: 38px; line-height: 38px; font-size: 14px; font-weight: 600; text-decoration: none; color: #6c757d; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus < box-shadow: 0 0 0 3px rgb(108 117 125 / 50%); >.btn:hover < color: #fff; background-color: #6c757d; border-color: #6c757d; >.btn:active < color: #fff; background-color: #6c757d; border-color: #6c757d; >.btn:disabled < pointer-events: none; opacity: 0.65; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: 1px solid #7952b3; border-radius: 5px; height: 38px; line-height: 38px; font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; background-color: #7952b3; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn-2:focus < box-shadow: 0 0 0 3px rgb(121 82 179 / 25%); >.btn-2:hover < background-color: #61428f; border-color: #61428f; >.btn-2:active < background-color: #61428f !important; border-color: #61428f !important; >.btn-2:disabled

Результат:

Instagram

Link Disabled

body < padding: 15px 0; >.btn < text-decoration: none; color: #6b5770; background-image: linear-gradient(90deg, #fd7f34, #bd155b); display: inline-block; padding: 14px 30px; border: 1px solid; position: relative; z-index: 0; border-radius: 5px; box-sizing: border-box; margin: 0 15px 15px 0; outline: none; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:before < content: ''; position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); background: linear-gradient(90deg, #fd7f34, #bd155b); z-index: -2; transition: .4s; border-radius: 5px; >.btn:after < content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #fff, #fff); z-index: -1; transition: .4s; border-radius: 4px; >.btn:hover < color: #fff; transition: .3s; >.btn:hover:after < background: linear-gradient(90deg, #fd7f34, #bd155b); >.btn:active:after < background: linear-gradient(90deg, #d96d2d, #760f3a); >.btn:focus-visible < box-shadow: 0 0 0 3px #fd7f34; >.btn:disabled < pointer-events: none; >.btn:disabled:before

Результат:

05.02.2021, обновлено 04.04.2022
Предыдущая запись Манипуляции с элементами jQuery
Следующая запись CSS-стили для списков dl, dt, dd

Комментарии 1

17 сентября 2021 в 02:02
Класс!
Спасибо, админ! ;0)

• Скопировать ссылку
• Пожаловаться

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

В HTML5 появилось специальное поле input с атрибутом type=number для вода чисел. Рассмотрим его возможности.

Подборка 23-х фонов с линейным и радиальным градиентом.
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.

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

Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над.

Каскадные таблицы стилей кнопки

Вы можете добавить CSS-кнопки, расположенные ниже, на свои страницы, использующие CSS, при условии, что соблюдены следующие правила:

Использование

Кнопка «Корректный CSS!» (“Valid CSS!”) предъявляет дополнительные условия:

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

Альтернативные кнопки

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

Навигация по сайту

Последнее обновление Пт 01 апр 2022 18:30:06

Нарисовать галочку средствами CSS

Можете подсказать, как нарисовать в CSS такую галочку(нужно именно нарисовать, а не вставить картинкой)?

Отслеживать
задан 15 ноя 2015 в 9:23
Александр Агапов Александр Агапов
349 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков
Вам в чекбокс или повсеместно? А в css тоже нельзя применять url() ?
15 ноя 2015 в 10:04

Нет, к сожалению нельзя. Мне просто галочку, без чекбокса). Как я понял, решения пока нет. Я применяю 2 наклонных линии, но пока безрезультатно.

15 ноя 2015 в 16:36

смотря в чем это будет использоваться. Если нужна поддержка векторных иконок, тогда лучше использовать svg или иконочные шрифты. Можно конечно нарисовать с transform rotate, но при неоднократном использовании такой методики это будет лишь перегружать код

15 ноя 2015 в 16:54

@Александр Агапов Добавлен свежий вариант с использованием входящим в тренд гугловских символьных шрифтов в стиле material design ru.stackoverflow.com/a/773972/28748

22 янв 2018 в 9:25

11 ответов 11

Сортировка: Сброс на вариант по умолчанию

[id^=c] < display: none; >[id^=c] + label < display: block; width: 30px; height: 30px; border: 1px solid green; text-align: center; >[id^=c] + label:before < content: '\2713'; display: inline-block; color: green; font-size: 30px; line-height: 30px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: 0.3s; transition: 0.3s; >[id^=c]:checked + label:before

[id^=c] < display: none; >[id^=c] + label < display: block; width: 30px; height: 30px; border: 1px solid green; text-align: center; overflow: hidden; position: relative; >[id^=c]:checked + label span < position: relative; display: inline-block; margin-left: -9px; >[id^=c]:checked + label span:before < content: ''; position: absolute; left: -5px; width: 10px; height: 3px; background: #c00; -webkit-transform: rotate(50deg); transform: rotate(50deg); >[id^=c]:checked + label span:after

Вариант 3 (clip-path)

[id^=c] < display: none; >[id^=c] + label < display: block; width: 30px; height: 30px; border: 1px solid green; text-align: center; position: relative; >[id^=c] + label:before < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: green; -webkit-clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); -webkit-transform: scale(0); transform: scale(0); -webkit-transition: transform .3s; transition: transform .3s; >[id^=c]:checked + label:before

Отслеживать
ответ дан 15 ноя 2015 в 10:37
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

Спасибо большое). Но мне просто галочку желательно сделать, как если бы мы вставляли картику через url)

15 ноя 2015 в 16:38

Если просто галочку без чекбокса, то вот идея:

.wrap < position: relative; margin-top: 100px; >.check-sign < position: absolute; background: red; >#check-part-1 < width: 50px; height: 20px; transform:rotate(45deg); >#check-part-2

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

Отслеживать
ответ дан 15 ноя 2015 в 16:49
Алексей Шиманский Алексей Шиманский
71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков

Анимация галочки начинается после клика мышкой

Отслеживать
ответ дан 4 июл 2017 в 6:06
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
SMIL сейчас deprecated, в Chrome когда-нибудь выпилят, а в IE/Edge никогда и не работало.
4 июл 2017 в 16:29

@Qwertiy уже, как два года deprecated и до сих пор жив и как говорится нет ничего более постоянного, чем временное Посмотри caniuse еще на 5 будущих версий вперед продлили

4 июл 2017 в 16:34
Но в IE/Edge всё равно нет и не будет.
4 июл 2017 в 16:42

@Qwertiy IE/Edge да, согласен, но кроме smil эти браузеры и многое другое делают очень криво. Но факт, остается фактом, SVG набирает популярность, особенно за бугром, недаром начиная c ie11 поддержка SVG выросла

4 июл 2017 в 16:49

Постарался повторить и упростить

i.check

Отслеживать
ответ дан 4 июл 2017 в 7:58
Евгений Миронов Евгений Миронов
519 4 4 серебряных знака 11 11 бронзовых знаков

Просто check галочка, просто SVG:

Отслеживать
ответ дан 4 июл 2017 в 17:39
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков

Простейшая галочка. Толщину и цвет регулируйте сами:

.select_header < position: relative; font-size: 2em; padding-left: 70px; >.select_header::before

Выберите язык

Отслеживать
7,274 2 2 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков
ответ дан 4 июл 2017 в 0:52
61 1 1 серебряный знак 1 1 бронзовый знак

Такое простое решение:

.checkmark < display: inline-block; width: 45px; height: 14px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); >.checkmark_stem < position: absolute; width: 7px; height: 26px; background-color: #e84245; left: 25px; top: -8px; >.checkmark_kick

Отслеживать
ответ дан 18 ноя 2015 в 8:39
Александр Агапов Александр Агапов
349 2 2 золотых знака 5 5 серебряных знаков 15 15 бронзовых знаков

Самая простая в мире галочка :

 ✔

Отслеживать
ответ дан 4 июл 2017 в 4:02
Потерянная Симка Потерянная Симка
41 2 2 бронзовых знака
Вы же просто символ написали, а надо нарисовать.
– user236939
4 июл 2017 в 8:14

Ещё один вариант

Хорошо подойдёт для приложений, которые выполняются в стиле Material design, шрифт адаптирован для мобильных версий.

Галочку можно легко внедрить в HTML с помощью символьного шрифта от Google, достаточно просто подключить символьный шрифт и написать название иконки.

Выбирать иконки по названиям можно здесь

Ниже пример использования.

Работает во всех браузерах. IE поддерживает начиная с 10 версии.

 i < margin: 100px 50px 50px 80px; transition: transform 1s ease-in-out; >i:hover < transform: scale(10); >.green .red

 done error