Как сверстать кнопку со стрелкой внутри?
Как более правильно сверстать вот такую кнопку? http://prntscr.com/n3idtl Первое что приходит на ум это сделать родительскому элементу border-radius:50% и background-image в виде самой стрелки. Может есть более элегантный способ?
Отслеживать
задан 27 мар 2019 в 8:33
Дмитрий Гаврилов Дмитрий Гаврилов
375 2 2 серебряных знака 12 12 бронзовых знаков
Можно вставить в блок готовую монохромную иконку и залить фон. Просто и быстро. Или создать саму иконку с помощью svg
– user262779
27 мар 2019 в 8:44
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Можно с помощью псевдоэлемента сделать:
.arrow < position: relative; width: 25px; height: 25px; border: 3px solid gray; border-radius: 50%; >.arrow:after
Отслеживать
ответ дан 27 мар 2019 в 8:45
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков
Вы саму стрелку центрируете по вертикали и горизонтали с помощью top и left . Так вообще правильно делать? Или есть какие-то более надежные варианты?
27 мар 2019 в 8:48
@ДмитрийГаврилов, если у самой кнопки фиксированные размеры, то это оптимальный вариант
27 мар 2019 в 8:50
Можно при помощи html + css и псевдо элемента :after :
.arr < display: inline-block; width: 4em; height: 4em; border: 0.5em solid; border-radius: 50%; text-align: center; >.arr:after
Можно при помощи svg
path, circle
PS: второй способ лично мне больше нравится
Отслеживать
ответ дан 27 мар 2019 в 8:46
Stranger in the Q Stranger in the Q
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Кнопка стрелкой на CSS
Верстаю я тут как-то один сайт, и там дизайнер сделал кнопку в виде стрелочки, то есть слева бордер ровный, а справа должен быть треугольник, предающий кнопке направление. Я долго гуглил, но так и не нашел решения на эту тему. Кнопки есть какие угодно, но только не такие. Поэтому я использовал Bootstrap и какие-то мысли, которые нарыл в интернетах, и в итоге у меня получилась вот такая кнопка.
Так как не нашел подобного решения, решил поделиться им здесь, может кто-то сейчас ищет именно это.
Внутри описание.
Чаще всего я использую Twitter Bootstrap для сетки и кнопок, но кнопки часто кастомизирую на основе стандартных. И эта кнопка не исключение.
.btn-buy < display: block; color: #fff; border-radius: 0em; /* Обнулить округлости */ -moz-border-radius: 0em; /* Обнулить округлости */ -webkit-border-radius: 0em; /* Обнулить округлости */ background: #265d94; border: none; text-shadow: -1px -1px 0px rgba(0,0,0,.2); border-bottom: 2px solid #153a65; position: relative; margin: 0 auto; /* Это просто для выравнивания кнопки посередине */ >.btn-buy:after, .btn-buy:before < left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; >.btn-buy:after < border-color: rgba(136, 183, 213, 0); border-left-color: #265d94; border-width: 16px; margin-top: -16px; >.btn-buy:before < border-color: rgba(194, 225, 245, 0); border-left-color: #153a65; border-width: 16px; margin-top: -14px; >.btn-buy:hover, .btn-buy:focus, .btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < color: #fff; outline: none; background: #2e6eae; border-bottom: 2px solid #1b4a80; >.btn-buy:hover:after, .btn-buy:focus:after, .btn-buy:active:after, .btn-buy.active:after < border-left-color: #2e6eae; >.btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < background: #265d94; color: #fff; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; >.btn-buy:active:after, .btn-buy.active:after, .open .dropdown-toggle.btn-buy:after
Всё достаточно просто — к элементу кнопки я добавил псевдо–элемент с бордером, о котором прочитал здесь, спасибо alizar, и еще один псево–элемент, но ниже — для тени.
.btn-buy:after, .btn-buy:before < left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; >.btn-buy:after < border-color: rgba(136, 183, 213, 0); border-left-color: #265d94; border-width: 16px; margin-top: -16px; >.btn-buy:before
Ну а дальше всё стандартно, при наведении это
.btn-buy:hover, .btn-buy:focus, .btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < color: #fff; outline: none; background: #2e6eae; border-bottom: 2px solid #1b4a80; >.btn-buy:hover:after, .btn-buy:focus:after, .btn-buy:active:after, .btn-buy.active:after
при нажатии это
.btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < background: #265d94; outline: none; color: #fff; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; >.btn-buy:active:after, .btn-buy.active:after, .open .dropdown-toggle.btn-buy:after
Вот демо на jsfiddle.net
Был рад, если помог кому–нибудь, всем добра.
Кнопка со стрелкой
Верхняя — состояние hover . То есть при наведении круг меняет цвет и стрелка меняет цвет. Как это сверстать? попыталась нарисовать стрелку с помощью CSS, но при как установить, чтобы цвет менялся, когда курсор в зоне круга? до стрелки же может не доходить курсор и состояние hover не подключится. Может есть более удачный способ для подобного?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Кнопка со стрелкой
Не пойму как создать в делфи подобную как на картинке кнопку? Выпадающий ее список похож на.
Кнопка с выпадающим меню (со стрелкой справа)
Всем привет. Подскажите, пожалуйста, где можно позаимствовать или как создать кнопку с выпадающим.
Шкала со стрелкой
Всем привет! Помогите сделать следующее: имеется 2 Image: один — шкала, а другой — стрелка. И.
Линия со стрелкой
Как нарисовать такую линию со стрелкой в winowsform
1682 / 854 / 349
Регистрация: 26.11.2014
Сообщений: 1,750
Записей в блоге: 1
1 2 3
.container:hover .arrow { . }
1294 / 768 / 190
Регистрация: 19.09.2020
Сообщений: 1,962
Сообщение было отмечено nekrokarya как решение
Решение
1 2 3 4 5 6 7 8 9 10 11 12 13 14
.arrow { display: block; width: 30px; height: 30px; background-color: #1C73FF; background-position: center; border-radius: 50%; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAYZJREFUaEPt2FtKAzEYBeAWdGFeFiAoLkG8rcYbuABxO754KfgoqE9uwfNDAhJmlEnPObElhdB06GTy5WRCZuazNfnM18Qx65D/lmRPpCciGoE+tUYGdg/HX1IRjf1ws8xE9nGJe5QvlG2UR6eEBcmIzdT5T3zvODEsyC06fVQk8I7fWygLRzIsSLRzjXJSdDqSiWn2pMawINHPphgmpCmGDcmYK1ROndNMAWmCUUHsGCXkL0wszc+s1UwN+Q3zkZZmCsYByZhLVM6KBGgYF0SOcUKkGDckY25QOS6m2Vvam73WLAAtIBlzgcr5wD2zi2OTHwFaQsZu/pWBjG0uV2pqBWIoiaUQea7W3Fs158gQTogU4YLIEQ6IBaGG2BBKiBWhgtgRCkgTBBvSDMGENEUwIfH6p3z6W3rbMWX7wNr9HuKidygb6eJWBDORaCtj4jk83pBUPSBNSeHnf1mJ5DYPUHlwI9iJ1A4m5Tx2IpRO1TTSITWjpjynJ6Ic3Zq2eyI1o6Y85xu/xmQzV8do3wAAAABJRU5ErkJggg=="); background-size: 25px; } .arrow:hover { background-color: #FF2800; cursor: pointer; }
div class="arrow">/div>
Нарисовать стрелку на CSS
Стрелки с рамками или стрелки в виде треугольников очень часто можно увидеть в макетах для верстки. Эти простые фигуры легко можно нарисовать, применяя лишь CSS свойства. У такого способа есть огромное преимущество перед скачанными иконками: в нарисованные CSS стрелки легко вносить изменения и применять к ним анимацию.
Создадим в HTML разметке блок и стилизуем его.
Сделаем общую основу для стрелок (вверх, вниз, вправо и влево), представляющую из себя квадрат с верхней и правой рамкой. Две другие стороны квадрата останутся невидимыми.
// CSS
.arrow width: 60px;
height: 60px;
border-top: 10px solid #6E18C0;
border-right: 10px solid #6E18C0;
margin-right: 60px;
>
В дальнейшем создадим для каждой стрелке свой блок и к уже имеющемуся классу arrow добавим дополнительные классы со свойством transform.
Стрелка вверх
Повернем стрелочку вверх на 45 градусов. По аналогии оформим остальные стрелки.
Стрелка вниз
// HTML
// CSS
.arrow-bottom transform: rotate(135deg); >
Стрелка вправо
// HTML
// CSS
.arrow-right transform: rotate(45deg);
>
Стрелка влево
// HTML
// CSS .arrow-left transform: rotate(-135deg);
>
Довольно таки часто в макетах встречаются маленькие треугольники, которые используются как стрелки. Такие треугольники делаются на толстых рамках. Обнуляем ширину и высоту блока и оставляем одну из сторон в цвете, а две другие стороны делаем с широкими прозрачными рамками. В стилизации участвуют только три стороны.
Треугольник вверх и вниз
// HTML
// CSS
.triangle-up width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid #6E18C0;
>
.triangle-down width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid #6E18C0;
>
Треугольник слева и справа
// HTML
// CSS
.triangle-left width: 0;
height: 0;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
border-right: 100px solid #6E18C0;
>
.triangle-right width: 0;
height: 0;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
border-left: 100px solid #6E18C0;
>
Что нужно для открытия своей Web-студии? Самое главное — это наконец-то оставить утопическую идею, что я сам могу на профессиональном уровне делать всю работу. Без частичного делегирования обязанностей по созданию клиентского сайта другим специалистам, к сожалению ваша новенькая Web-студия не будет успешна. Когда клиент обращается в Web-студию, он рассчитывает получить сайт под ключ в одном месте. Уж поверьте, одному человеку (особенно начинающему) не вытянуть заказ даже средней сложности. Основываясь на своем личный опыт, я записал пошаговое руководство по Созданию своей Web-студии за 55 дней.
Создано 30.03.2020 10:31:22
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.