Изменить вид кнопки в HTML
Спасибо большое сработало)Но я нуб и у меня сразу еще один вопрос, как сделать так что бы при нажатии отрабатывалась такая же анимация на картинке как и при нажатии на обычную кнопку, или просто в css менять цвет при нажатии?
17 ноя 2018 в 12:15
Стилями, селектором .button:active <>
19 ноя 2018 в 6:35
.button< background: transparent url('https://cdn1.iconfinder.com/data/icons/interface-elements/32/add-circle-24.png'); background-size: contain; width: 24px; height: 24px; border: 0; outline: none; >Отслеживать
ответ дан 16 ноя 2018 в 15:34
1,585 7 7 серебряных знаков 10 10 бронзовых знаков
border-radius: 50%; в идентификатор
Отслеживать
ответ дан 16 ноя 2018 в 16:38
developerstudent developerstudent
1 1 1 бронзовый знак
Отслеживать
ответ дан 30 апр 2022 в 16:08
50 5 5 бронзовых знаков
пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править
30 апр 2022 в 16:08
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как изменить размер кнопки в css
CSS для начинающих. CSS кнопки это просто // HTML and CSS
Для начала нам необходимо нарисовать кнопку, вроде этой:
Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:
Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (“Fill Opacity” => 0%)):
Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.
Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:
Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):
Результат с залитой границей:
Если мы сделаем цветной фон:
Ну вот – кнопочка и готова, приступим к следующему шагу…
Простая CSS кнопка
Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):
Теперь нам остается лишь слегка подправить CSS для таких кнопок:
Сам HTML код элементарен:
Резиновая CSS кнопка
Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.
Строим DOM
Ну и сам HTML код:
Примечание: можно использовать практически любые другие HTML теги, это дело вкуса, так что таким же образом вы можете изменить и элементы формы. Для упрощения HTML’а можно воспользоваться JavaScript’ом. Приведу пример:
Изменить размер кнопки
Как изменить размер и месторасположение кнопки и шрифт текста в кнопк?
есть кнопка: <input value="Как получить задания и ответы" type="button".
Изменить размер кнопки
Есть две кнопки и Static. По нажатию первой кнопки размеры второй меняются и размеры отображаются в.
Как изменить размер кнопки?
Всем привет! Собственно есть так, а нужно вот так. Метка и строка ввода в первом ряде QVBoxLayout.
Qt designer, как изменить размер этой гребаной кнопки?
Начал работать в Qt designer и испытываю большие трудности с установкой размера многих многих.
Как уменьшить ширину кнопки?
У меня есть кнопка, которая, что бы я ни делал, автоматически добавляет отступы слева и справа, которые я не могу уменьшить.
Я пробовал использовать максимальную ширину, но это просто заставляет кнопку перемещаться в левую часть страницы.
5 ответов
Добавьте эти две строки в свой css
Добавив «ширину» к div, он попытается переместиться к левой стороне по умолчанию. Добавление ‘margin: 0 auto’ центрирует div
Добавьте width в класс кнопки, а также добавьте margin:0 auto; reduce padding . то есть,
Во-первых, как я сказал в своем комментарии, вы должны использовать правильный инструмент для работы; это необходимо для того, чтобы программы чтения с экрана и другие инструменты для людей с ограниченными возможностями знали, с чем они работают.
Итак, вы можете обойти проблемы с интервалом, используя поля:
Это всего лишь пример, но пока ваш родительский контейнер настроен на правильную ширину, кнопка будет благополучно центрироваться.
Как изменить размер переключателя с помощью CSS?
есть ли способ контролировать размер переключателя в CSS ?
13 ответов:
Да, вы должны быть в состоянии установить его высоту и ширину, как и с любым элементом. Однако некоторые браузеры на самом деле не принимают эти свойства во внимание.
эта демонстрация дает обзор того, что возможно и как это отображается в различных браузерах. http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/
Как вы увидите, стиль переключатель не так просто : — D
обходной путь заключается в использовании javascript и css для замените переключатели и другие элементы формы пользовательскими изображениями :
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
.
хотя старый вопрос, его было больше всего голосов по данному вопросу. У меня есть еще одно решение, с которым я столкнулся недавно. Этот css, кажется, делает трюк.
установка границы в 0, кажется, позволяет пользователю изменять размер кнопки и иметь браузер отображать его в этом размере, например. вышеуказанная высота: 2em будет отображать кнопку в два раза выше высоты линии. Это также работает для флажков (input[type=checkbox]). Некоторые браузеры отображают лучше, чем другие.
из окна windows он работает в ie8+, ff21+, chrome29+.
Ура.
старый вопрос, но теперь есть простое решение, совместимое с большинством браузеров, который заключается в использовании CSS3 . Я тестировал в IE, Firefox и Chrome, и это работает.
изменить значение 1.5 , в этом случае инкремент 50% в размере, согласно вашим потребностям. Если коэффициент очень высок,он может размыть переключатель. На следующем рисунке показано соотношение 1,5.
изменение размера виджета по умолчанию не работает во всех браузерах, но вы можете сделать пользовательские переключатели с JavaScript. Одним из способов является создание скрытых переключателей, а затем разместить свои собственные изображения на странице. Щелчок по этим изображениям изменяет изображения (заменяет нажатое изображение изображением с переключателем в выбранном состоянии и заменяет другие изображения переключателями в невыбранном состоянии) и выбирает новый переключатель.
в любом случае, есть документация на эту тему. Например, прочитайте это:стиль флажки и переключатели с CSS и JavaScript.
- скрыть переключатель с помощью javascript.
- используйте javascript для добавления / отображения HTML, который может быть оформлен так, как вам нравится, например
- определите правила css для выбранного состояния, которое запускается добавлением класса «selected» к yuor span.
- наконец, напишите javascript, чтобы состояние переключателя реагировало чтобы щелкнуть по диапазону и, наоборот, чтобы получить диапазон для реагирования на изменения состояния переключателя (например, когда пользователи используют клавиатуру для доступа к форме). вторая часть этого может быть сложно получить для работы во всех браузерах. Я использую что-то вроде следующего (который также использует jQuery. Я также избегаю добавления дополнительных пролетов, стилизуя и применяя «выбранный» класс непосредственно к входным меткам).
вы можете управлять размером переключателя с помощью стиля css:
style= » высота: 35px; ширина: 35px;»
это непосредственно управляет размером переключателя.
вот один подход. По умолчанию переключатели были примерно в два раза больше этикеток.
(см. CSS и HTML код в конце ответа)Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (нечеткость не ошибка IE, размещенный тест на netrenderer.com)
CSS:
HTML:
непосредственно вы не можете этого сделать. [Насколько мне известно].
вы должны использовать images для замены переключателей. Вы можете заставить их работать так же, как и переключатели в большинстве случаев, и вы можете сделать их любого размера, который вы хотите.
вы также можете использовать свойство transform, с требуемым значением в масштабе:
Похожие публикации:
- Как добавить свой шрифт в css
- Как заблюрить картинку в css
- Как увеличить блок в css
- Как увеличить текст в css
Делаем стильные кнопки
Стандартные кнопки, созданные через тег или , выглядят, конечно, хорошо, но попытка изменить их вид через стили приводит к ужасному результату. Кнопки становятся приветом интерфейсам десятилетней давности с их угловатостью (рис. 1). Разумеется, такая метаморфоза возникает только при использовании свойств background и border , иными словами, нельзя изменить цвет фона кнопки и рамку вокруг нее.
Рис. 1. Исходная и измененная кнопка
Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.
За основу возьму оригинальную кнопку в браузере, которая содержит линейный вертикальный градиент и скругленные края.
Самое простое сделать закругление уголков, для чего используем свойство border-radius , задавая ему нужный радиус скругления. Как обычно, работает не во всех браузерах, поэтому придется добавлять полный комплект. В итоге получается следующее.
-moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */Вид кнопок в разных браузерах показан на рис. 2.
Рис. 2. Кнопки со скругленными уголками
В общем, все ожидаемо. Старые версии IE не поддерживают CSS 3, остальные корректно делают нужные мне уголки. Опера почему-то не отображает фон по умолчанию, как это делают другие браузеры, но про Оперу еще зайдет особый разговор.
Теперь самое интересное, делаем вертикальный линейный градиент. Для этого опять в ход пойдут индивидуальные стили для каждого браузера.
Firefox
background: -moz-linear-gradient(#00BBD6, #EBFFFF);
В градиенте указывается исходная точка, угол градиента, начальный и конечный цвет. В нашем случае, когда градиент идет вертикально сверху вниз, достаточно задать только цвета, остальные параметры используются по умолчанию.
Chrome, Safari
background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00BBD6′, endColorstr=’#EBFFFF’);
Браузер IE идет своим путем и для разных эффектов применяет свойство filter , в том числе и для градиента. Здесь все тривиальнее, пишется только начальный и конечный цвет градиента.
Опера отдыхает, в ней градиенты еще не реализованы.
Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).
Пример 1. Кнопки с линейным градиентом
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Кнопки button.new Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки — она выглядит плоской, как доска.
Рис. 3. Вид кнопки с градиентом
Сделать кнопку нужной формы можно опять же градиентом, «играя» цветами. Двумя значениями градиента уже не обойтись, к счастью, Firefox и Safari предлагают решение.
Firefox
background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
Вместо двух значений вставляем желаемое количество цветов, градиент будет плавно переходить от одного цвета к другому.
Chrome, Safari
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));
Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.
Пример 2. Кнопки с улучшенным градиентом
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Кнопки button.new Результат примера показан на рис. 4.
Рис. 4. Градиент, какой надо градиент
Аналогично можно создавать любые другие градиенты на кнопке или другом элементе (рис. 5). Но это уже сделайте самостоятельно, для чего в практикум добавил соответствующую задачу.
Рис. 5. Такие разные кнопки
Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).
Рис. 6. Наложение фона на уголки в IE 9
Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrome.
Как изменить размер кнопки submit.
Бывает так, что размеры стандартной кнопки submit не подходят. Например, нам бы хотелось изменить ее размер и сделать крупнее. Способов здесь достаточно много, но в рамках данного поста мы рассмотрим лишь один наиболее простой способ, как изменить размер кнопки submit, используя для этого css-стили.
Допустим, у нас есть простейшая форма с одним текстовым полем и кнопкой submit.
1 2 3 4 5 6 7 8 9 10
Если мы сейчас откроем итоговый html-файл с этим кодом, то увидим, что кнопка приобрела размер в соответствии с величиной текста «send» с небольшими отступами вокруг него. Это отображение по умолчанию. Для изменения размера кнопки мы добавим к ней свой пользовательский класс, а для класса пропишем свойства в хэдере страницы (также стили можно разместить в подключаемом css-файле).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
.my_button
Теперь кнопка приобретет квадратную форму (размеры приведены здесь для примера). Таким образом, вы можете назначать кнопке любую произвольную высоту или ширину.
Другие посты
- Курсив в html. Как сделать текст на странице курсивом?
- HTML ссылка. Создание ссылок в HTML.
- Тег H1: что, как и зачем.
- Как вставить картинку в HTML.
- Как сделать в HTML подчеркнутый текст.