Как уменьшить кнопку в css
Перейти к содержимому

Как уменьшить кнопку в css

  • автор:

Установить определенный размер CSS кнопки?

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

Как сделать так, чтобы кнопки имели одинаковую длину и текст по центру? Длину в px.

  • Вопрос задан более трёх лет назад
  • 39526 просмотров

Комментировать
Решения вопроса 1

.button
.button < width: 250px; height: 26px; border: 1px solid #0a3c59; background: #3e779d; background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d)); background: -webkit-linear-gradient(top, #65a9d7, #3e779d); background: -moz-linear-gradient(top, #65a9d7, #3e779d); background: -ms-linear-gradient(top, #65a9d7, #3e779d); background: -o-linear-gradient(top, #65a9d7, #3e779d); background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%); /*padding: 12px 24px;*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #7ea4bd 0 1px 0; color: #eff1f2; font-size: 17px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; >

Ответ написан более трёх лет назад
Нравится 2 7 комментариев
Cheezo @Cheezo Автор вопроса

Надо бы скажем чтобы кнопка JavaScript было по размеру (длине) как и кнопка Лекционный материал.

Добавить еще display: block;
Cheezo @Cheezo Автор вопроса
Во, теперь они имеют одинаковый размер, правда текст не по центру.
clip2net.com/s/4WK96U

Попробуйте изменить
display:block;
на
display:inline-block;

И добавить
line-height:26px;

Cheezo @Cheezo Автор вопроса

clip2net.com/s/4WKeug
Так, теперь они выровнялись, спасибо, но нужно чтобы они также были по центру.
Т.е. текст был не слева, а по середине.

text-align: center;
Cheezo @Cheezo Автор вопроса
Как я не догадался.
Всем огромнейшей спасибо, все работает как нужно.
clip2net.com/s/4WKiNP
Ответы на вопрос 1
width: . ; + text-align: center; ? Или в чем подвох здесь?
Ответ написан более трёх лет назад
Cheezo @Cheezo Автор вопроса

Скажу честно, я в CSS еще не очень понимаю.
Просто сейчас длина кнопки настраивается сама, по длине текста в ней.
А надо чтобы я могу сам задать ее размер (скажем 250х26 px) и текст в ней был по центру, вне зависимости от его длины.
Было бы здорово, если бы вы намекнули, куда вписать строчку.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как сделать такую оберткудля формы?

  • 1 подписчик
  • 40 минут назад
  • 7 просмотров

как изменить текст кнопки js

Для изменения текста кнопки в JavaScript необходимо получить доступ к элементу кнопки с помощью метода document.getElementById() , затем установить текстовое значение. Например, через свойство textContent :

 id="myButton">Нажми меня 
const button = document.getElementById('myButton'); button.textContent = 'Новый текст кнопки'; 

В этом примере мы получили элемент кнопки по его id , затем установили новое значение свойства textContent на «Новый текст кнопки». Кнопка теперь будет отображать этот текст.

13 апреля 2023

Чтобы изменить текст на кнопке с помощью JavaScript, можно использовать свойство innerHTML элемента кнопки. Вот пример:

Нажми меня  

В этом примере, сначала находим кнопку с помощью метода getElementById() , а затем используем свойство innerHTML для изменения текста кнопки на «Кликни меня». Это заменит текст «Нажми меня» на кнопке на новый текст «Кликни меня».

Также можно использовать метод innerText вместо innerHTML , если нужно изменить только текстовое содержимое элемента кнопки без изменения любых HTML-тегов внутри этого элемента. Вот пример:

Нажми меня  

Оба примера изменят текст на кнопке на новый текст. Выбор между использованием innerHTML или innerText зависит от того, нужно ли изменять только текстовое содержимое элемента или изменять HTML-теги внутри элемента кнопки.

Как изменить позицию кнопки в CSS

введите сюда описание изображения

Нужно переместить кнопку на другую строну, как в изображение:

button

Отслеживать

задан 14 июн 2019 в 5:40

user328164 user328164

зависит от display . например так: float:right или margin-left:auto или text-align:right

14 июн 2019 в 5:46

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

14 июн 2019 в 5:55

1 ответ 1

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

.block < width:100%; >.fr < float:right; >.fl < float:left; >.ma < margin-left: auto; >.mt < text-align: right; >.d-flex


Отслеживать

ответ дан 14 июн 2019 в 5:53

Vitaliy Stop_RU_war_in_UA Vitaliy Stop_RU_war_in_UA

3,860 12 12 серебряных знаков 28 28 бронзовых знаков

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Как уменьшить кнопку в css

—> Цель:
Сегодня наша задача замена стандартной кнопки «отправить» на красивую. Кнопка выполняет отправку формы и имеет тип «submit». Можно конечно изменить тип с «submit» на «image» и добавить параметр «src», но наша задача на сегодня это оставить тип «submit» на месте и программно нарисовать красивую кнопку.

Применение:
Для чего это может понадобиться? Всё просто, для придания эстетичного вида той самой кнопке.
Вот для сравнения. Наглядно видно, что вторая кнопка смотрится лучше.

Решение:
Для выполнения данной цели как и говорилось мы будем применять «input» с типом «submit». Ещё нам понадобится описать новый класс в таблице стилей «*.css»
Вот код для html-файла:

.superbutton width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
>

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

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

Проблема рамки вокруг кнопки:
И всё вроде ничего и выглядит ничего и при наведении темнеет, но при нажатии мы видим ужасную рамку. Ещё эту рамку можно наблюдать если наша кнопка находится в фокусе, в том который по кнопке Tab перебирает элементы на странице.
Для этого мы пропишем в css ещё 2 псевдо класса, как и «hover». Это классы «active» который отвечает за вид при нажатии на кнопку и класс «focus» при фокусе на кнопке. Но есть одна особенность, так как у нас input и присвоенный ему класс, то active прописывать не обязательно.
Вот код:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *