Як змінити колір фону і шрифту тексту на кнопці у формі?
Оформлення кнопки залежить від параметрів операційної системи та обраного браузера. Тому одна і та ж кнопка може різнитися за своїм виглядом у браузері Internet Explorer, Opera чи Chrome. Застосування CSS властивості background не тільки змінює колір тла кнопки, але також змінює її вигляд, роблячи кнопку однаковою в різних браузерах (приклад 1).
Приклад 1. Колір кнопки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат прикладу показаний на рис. 1.
В даному прикладі стиль кнопки визначається за допомогою інтерфейсу класу b1 , який задається в тегу з допомогою атрибута class .
Зміна вигляду кнопки обумовлена застосуванням властивості background або background-color . Зміна кольору тексту або шрифту на кнопці залишає вихідним вигляд кнопки, зокрема, її форму і колір фону.
Как изменить размер и месторасположение кнопки и шрифт текста в кнопк?
Как изменить шрифт текста кнопки?
Всем привет! Не подскажите, как можно изменить шрифт текста в кнопке? Либо, если возможно.
Как изменить шрифт и размер шрифта
подскажите пожалуйсто как изменить шрифт и размер шрифта, какие библиотеки и функции
Как изменить размер и шрифт всплывающей подсказки?
как изменить размер и шрифт всплывающей подсказке нужно обязательно создавать свой класс или.
Как изменить цвет, шрифт и фон кнопки в MATLAB
как сделать так, чтобы вот на фоне этой кнопки была картинка? function new figure ( ‘MenuBar’.
Как изменить шрифт кнопки в html
Здравствуйте, alex-v, Вы писали:
AV>как поменять шрифт кнопки ?
AV>пробал через CSS, но работает только под IE.
Открыл Firebug(родной, т.е. из FF, тем более IE нет ) набрал:
показывает маленькие буквы.
Re[2]: шрифт кнопки
| От: | alex-v |
| Дата: | 30.08.09 11:04 |
| Оценка: |
Здравствуйте, Курилка, Вы писали:
К>Открыл Firebug(родной, т.е. из FF, тем более IE нет ) набрал:
К>
К>показывает маленькие буквы.
Да, спасибо, все замечательно, вот только стиль «подчеркнутый» для кнопки в Опере не действует. Не знаете почему?
С Богом. Александр.
Re[3]: шрифт кнопки
| От: | alex-v |
| Дата: | 30.08.09 11:06 |
| Оценка: |
"button" value="Bold" style="font-family: 'Verdana'; font-size: 13px; color: #0000FF; text-decoration: underline;" />в опере не показывает подчеркнутый шрифт.
С Богом. Александр.
Re[3]: шрифт кнопки
| От: | Курилка | http://kirya.narod.ru/ |
| Дата: | 30.08.09 11:48 | |
| Оценка: |
Здравствуйте, alex-v, Вы писали:
AV>Здравствуйте, Курилка, Вы писали:
К>>Открыл Firebug(родной, т.е. из FF, тем более IE нет ) набрал:
К>>
К>>показывает маленькие буквы.
AV>Да, спасибо, все замечательно, вот только стиль «подчеркнутый» для кнопки в Опере не действует. Не знаете почему?
В FF3.5/Ubuntu тоже вроде как. Вот здесь есть несколько комментариев на эту тему. Добавление display:block «включает» подчёркивание, строгий ответ не знаю
Re[4]: шрифт кнопки
| От: | alex-v |
| Дата: | 30.08.09 12:05 |
| Оценка: |
Здравствуйте, Курилка, Вы писали:
К>В FF3.5/Ubuntu тоже вроде как. Вот здесь есть несколько комментариев на эту тему. Добавление display:block «включает» подчёркивание, строгий ответ не знаю
Спасибо, проверил: display:block «НЕ включает» подчёркивание. Что же Опере не нравиться?
С Богом. Александр.
Re[5]: шрифт кнопки
| От: | Курилка | http://kirya.narod.ru/ |
| Дата: | 30.08.09 12:17 | |
| Оценка: |
Здравствуйте, alex-v, Вы писали:
AV>Здравствуйте, Курилка, Вы писали:
К>>В FF3.5/Ubuntu тоже вроде как. Вот здесь есть несколько комментариев на эту тему. Добавление display:block «включает» подчёркивание, строгий ответ не знаю
AV>Спасибо, проверил: display:block «НЕ включает» подчёркивание. Что же Опере не нравиться?
Re[6]: шрифт кнопки
| От: | alex-v |
| Дата: | 30.08.09 12:49 |
| Оценка: |
Как увеличить текст внутри кнопки-картинки (CSS)?
Учусь делать сайт по шаблону, и надо сделать кнопку (может не кнопку пока не разобрался, но сделал кнопку). Внутри вообщем изображение, а внутри изображения текст. И мне надо чтоб при наведении изображение размывалось и немного увеличивалось (с этим я справился), но возникла другая проблема! Надо чтоб текст тоже при наведении увеличивался, но когда я навожу мышь на картинку анимация картинки происходит, а вот анимация текста нет. И если я я наведусь на текст то текст увеличивается а эффект изображения исчезает. Ну и текст как-то некрасиво увеличивается (скорее всего это из-за margin-top, но vertical-align не работает, и top тоже не работает!), надо чтоб он как бы приподнялся.(Это я сам как нибудь решу, но буду благодарен если скажете почему не работает vertical-align и top)
Вообщем надо синхронизировать анимацию изображения с анимацией текста!
Вообщем вот код
.img_btn_1, .img_btn_2 < position: relative; display: inline-block; border: none; padding: 0; overflow: hidden; >.img_btn_1 < margin-left: 3.65%; float: left; >.img_btn_2 < float: right; margin-right: 3.65%; >.img_btn_1 img.img_g, .img_btn_2 img.img_g < height: 409px; width: 543px; transition: all 1s ease; >.img_btn_1 img.img_g:hover, .img_btn_2 img.img_g:hover < filter: blur(1px); transition: all 0.5s ease; transform: scale(1.2) >.img_btn_1 span, .img_btn_2 span < position: absolute; top: 10px; width: 100%; left: 0; >.img_btn_1 span h5, .img_btn_2 span h5 < color: #FFFFFF; font-size: 14px; font-weight: normal !important; margin-top: 30%; margin-bottom: 5px !important; text-align: center; font-family: pfdintextcondpro-regular !important; >.img_btn_1 span p, .img_btn_2 span p < color: #FFFFFF; font-size: 32px !important; font-family: pfdintextcondpro-regular !important; font-weight: bold !important; margin: 0; line-height: 30px; >.icon
Стили текста я убрал, но там я увеличивал текст с помощью font-size, есть ли другой способ чтоб можно было увеличить в процентах, т.к. два разных размера шрифта, и не хочется каждому прописывать размер
Скрины
(Без наведения)
(Навдение на изображение)
(тут текст увеличивается когда навожусь конкретно на него)
P.S. top заработал, надо было применить её к span
- Вопрос задан более двух лет назад
- 999 просмотров
4 комментария
Простой 4 комментария