I’ve been trying and failing to change button font with CSS. I can change their background color and I can change a textarea input’s font, but for some reason I don’t seem to be able to change a button’s font. From my limited understanding, the following code should work:
<html>
<head>
<style>
body {
font-family: monospace;
}
input[type=button] {
font-family: monospace;
}
</style>
</head>
<body>
This is a button:
<input type = "button" value = "Please click">
</body>
</html>
But only changes the font of the text, not the button. What am I missing?
[UPDATE] Per the responses here I changed input [type = button] to input[type=button].
asked Jun 9, 2018 at 11:06
Itai YasurItai Yasur
891 gold badge3 silver badges10 bronze badges
6
It is so simple, you already have it. I think you made a mistake while writing CSS of it, you have a space in input[type=button], though you were pretty close.
<style>
body {
font-family: monospace;
}
input[type=button] {
font-family: monospace;
}
</style>
answered Jun 9, 2018 at 11:11
Sitecore SamSitecore Sam
3772 gold badges8 silver badges14 bronze badges
1
You have a spce between input and [type=button]. Remove it and it would work. Try this code.
input[type=button] {
font-family: monospace;
}
answered Jun 9, 2018 at 11:10
Aryan TwanjuAryan Twanju
2,4641 gold badge9 silver badges12 bronze badges
The problem is the space after input. this should work:
<html>
<head>
<style>
body {
font-family: monospace;
}
input[type = button] {
font-family: monospace;
}
</style>
</head>
<body>
This is a button:
<input type = "button" class = "button" value = "Please click">
</body>
</html>
answered Jun 9, 2018 at 11:10
MehdiBMehdiB
83912 silver badges30 bronze badges
Тег <button> используется для создания интерактивных кнопок на веб-странице. В отличие от одинарного тега <input> (с атрибутом type=”button”), при помощи которого также можно создавать кнопки, содержимым тега <button> может быть как текст, так и изображение.
Если вы хотите создать кнопку в HTML форме, используйте элемент <input>, так как браузеры по-разному отображают содержимое тега <button>.
Содержимое тега пишется между открывающим <button> и закрывающим </button> тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h1>Вот наша кнопка..</h1>
<button type="button">Нажать</button>
</body>
</html>Результат
К тегу <button> можно применять CSS стили для изменения внешнего вида кнопки, ее размера, цвета, шрифта текста и т.д.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Обычная кнопка
<button type="button">Добавить в корзину</button>
<hr />
Кнопка с красным текстом
<button type="button" style="color: red;"><b>Книга HTML</b></button>
<hr />
Кнопка с увеличенным размером шрифта
<button type="button" style="font: bold 14px Arial;">Загрузить книгу </button><br />
</body>
</html>Результат
У тега <button> нет обязательных атрибутов, однако мы рекомендуем всегда использовать атрибут type=”button”, если тег используется в качестве обычной кнопки.
Тег <button> поддерживает глобальные атрибуты и атрибуты событий.
The CSS Buttons are used to decorate the web pages by applying the various styling properties to the button. Buttons are used for event processing and interacting with the user. From submitting a form to getting to view some information, we have to click on buttons. Button tag is used to create buttons in HTML.
Example: This simple example describes the button tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button tag </title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>button tag</h2>
<button>Button</button>
</body>
</html>
Output:
Basic Styling in button: There are many CSS properties used to style the button element which is discussed below:
background-color: This property is used to set the background color of the button.
Syntax:
element {
background-color: color_name;
}
Example: This example describes the Button with basic styling property where the background-color is applied to the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
border: none;
color: white;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set button background color */
background-color: red;
}
.b2 {
/* Set button background color */
background-color: blue;
}
.b3 {
/* Set button background color */
background-color: green;
}
.b4 {
/* Set button background color */
background-color: yellow;
}
</style>
</head>
<body>
<button class="button b1">Red</button>
<button class="button b2">Blue</button>
<button class="button b3">Green</button>
<button class="button b4">Yellow</button>
</body>
</html>
Output:
border: This property is used to set the border of the button.
Syntax:
element {
border: style;
}
Example: This example describes the Button with the border property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
background-color: red;
color: white;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set border property */
border: none;
}
.b2 {
/* Set border property */
border: 2px black solid;
}
.b3 {
/* Set border property */
border: 2px black dashed;
}
.b4 {
/* Set border property */
border: 2px black double;
}
.b5 {
/* Set border property */
border: 2px black groove;
}
</style>
</head>
<body>
<button class="button b1">None</button>
<button class="button b2">Solid</button>
<button class="button b3">Dashed</button>
<button class="button b4">Double</button>
<button class="button b5">Groove</button>
</body>
</html>
Output:
color: This property is used to set the color of the text in the button. The color value can be set in terms of color name, color hex code, etc.
Syntax:
element {
color: style;
}
Example: This example describes the Button with the color property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
background-color: red;
border: none;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set the color of text */
color: white;
}
.b2 {
/* Set the color of text */
color: black;
}
.b3 {
/* Set the color of text */
color: blue;
}
</style>
</head>
<body>
<button class="button b1">White</button>
<button class="button b2">Black</button>
<button class="button b3">Blue</button>
</body>
</html>
Output:
padding: This property is used to set the padding in the button.
Syntax:
element {
padding: style;
}
Example: This example describes the Button with the padding property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button padding property </title>
<style>
.b {
border: none;
font-size: 16px;
}
.b1 {
background-color: red;
padding: 15px 32px;
}
.b2 {
background-color: blue;
padding: 24px 50px;
}
.b3 {
background-color: green;
padding: 32px 32px;
}
.b4 {
background-color: yellow;
padding: 16px;
}
</style>
</head>
<body>
<button class="button b1">15px 32px</button>
<button class="button b2">24px 50px</button>
<button class="button b3">32px 32px</button>
<button class="button b4">16px</button>
</body>
</html>
Output:
font-size: This property is used to set the size of the text in the button. Change the pixel value to get the desired size.
Syntax:
element {
font-size: style;
}
Example: This example describes the Button with the font-size property to adjust the font of the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button font-size property </title>
<style>
.button {
padding: 15px 32px;
border: none font-size: 16px;
}
.b1 {
background-color: red;
font-size: 10px;
}
.b2 {
background-color: blue;
font-size: 15px;
}
.b3 {
background-color: green;
font-size: 20px;
}
.b4 {
background-color: yellow;
font-size: 30px;
}
</style>
</head>
<body>
<button class="button b1">10px </button>
<button class="button b2">15px</button>
<button class="button b3">20px</button>
<button class="button b4">30px</button>
</body>
</html>
Output:
border-radius: This property is used to set the border-radius of the button. It sets the rounded corners of the border.
Syntax:
element {
border-radius: property;
}
Example: This example describes the Button with the border-radius property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button border-radius property </title>
<style>
.b {
padding: 15px 32px;
border: none;
font-size: 16px;
}
.b1 {
background-color: red;
border-radius: 3px;
}
.b2 {
background-color: blue;
border-radius: 6px;
}
.b3 {
background-color: green;
border-radius: 10px;
}
.b4 {
background-color: yellow;
border-radius: 20px;
}
.b5 {
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<button class="b b1">3px </button>
<button class="b b2">6px</button>
<button class="b b3">10px</button>
<button class="b b4">20px</button>
<button class="b b5">50%</button>
</body>
</html>
Output:
box-shadow: This property is used to create the shadow of the button box.
Syntax:
box-shadow: [horizontal offset] [vertical offset] [blur radius]
[optional spread radius] [color];
Example: This example describes the Button with the box-shadow property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button box-shadow property </title>
<style>
.b {
padding: 15px 32px;
border: none font-size: 16px;
color: white;
}
.b1 {
background-color: green;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button class="b b1">Shadow 1 </button>
</body>
</html>
Output:
width: This property is used to set the width of the button.
Syntax:
element {
width: property;
}
Example: This example describes the Button with the width property to set the width of the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>button width property</title>
<style>
.button {
padding: 15px 32px;
border: none;
font-size: 16px;
color: white;
}
.b1 {
background-color: red;
width: 100px;
}
.b2 {
background-color: blue;
width: 200px;
}
.b3 {
background-color: green;
width: 50%;
}
.b4 {
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<button class="button b1">100px </button>
<button class="button b2">200px </button>
<button class="button b3">50% </button>
<button class="button b4">100%</button>
</body>
</html>
Output:
Hover Effects: This property is used to change the button interface when the mouse moves over.
Syntax:
element:hover {
// CSS property
}
Example: This example describes the Button with the hovering effect on the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>button width property</title>
<style>
.button {
padding: 15px 32px;
border: none font-size: 16px;
color: white;
transition-duration: 0.3s;
}
.b1 {
background-color: green;
}
.b2 {
background-color: orange;
}
.b1:hover {
background-color: white;
color: orange;
}
.b2:hover {
background-color: white;
color: green;
}
</style>
</head>
<body>
<button class="button b1">Green </button>
<button class="button b2">Orange </button>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Microsoft Edge
- Internet Explorer
- Opera
- Safari
The CSS Buttons are used to decorate the web pages by applying the various styling properties to the button. Buttons are used for event processing and interacting with the user. From submitting a form to getting to view some information, we have to click on buttons. Button tag is used to create buttons in HTML.
Example: This simple example describes the button tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button tag </title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>button tag</h2>
<button>Button</button>
</body>
</html>
Output:
Basic Styling in button: There are many CSS properties used to style the button element which is discussed below:
background-color: This property is used to set the background color of the button.
Syntax:
element {
background-color: color_name;
}
Example: This example describes the Button with basic styling property where the background-color is applied to the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
border: none;
color: white;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set button background color */
background-color: red;
}
.b2 {
/* Set button background color */
background-color: blue;
}
.b3 {
/* Set button background color */
background-color: green;
}
.b4 {
/* Set button background color */
background-color: yellow;
}
</style>
</head>
<body>
<button class="button b1">Red</button>
<button class="button b2">Blue</button>
<button class="button b3">Green</button>
<button class="button b4">Yellow</button>
</body>
</html>
Output:
border: This property is used to set the border of the button.
Syntax:
element {
border: style;
}
Example: This example describes the Button with the border property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
background-color: red;
color: white;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set border property */
border: none;
}
.b2 {
/* Set border property */
border: 2px black solid;
}
.b3 {
/* Set border property */
border: 2px black dashed;
}
.b4 {
/* Set border property */
border: 2px black double;
}
.b5 {
/* Set border property */
border: 2px black groove;
}
</style>
</head>
<body>
<button class="button b1">None</button>
<button class="button b2">Solid</button>
<button class="button b3">Dashed</button>
<button class="button b4">Double</button>
<button class="button b5">Groove</button>
</body>
</html>
Output:
color: This property is used to set the color of the text in the button. The color value can be set in terms of color name, color hex code, etc.
Syntax:
element {
color: style;
}
Example: This example describes the Button with the color property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
background-color: red;
border: none;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set the color of text */
color: white;
}
.b2 {
/* Set the color of text */
color: black;
}
.b3 {
/* Set the color of text */
color: blue;
}
</style>
</head>
<body>
<button class="button b1">White</button>
<button class="button b2">Black</button>
<button class="button b3">Blue</button>
</body>
</html>
Output:
padding: This property is used to set the padding in the button.
Syntax:
element {
padding: style;
}
Example: This example describes the Button with the padding property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button padding property </title>
<style>
.b {
border: none;
font-size: 16px;
}
.b1 {
background-color: red;
padding: 15px 32px;
}
.b2 {
background-color: blue;
padding: 24px 50px;
}
.b3 {
background-color: green;
padding: 32px 32px;
}
.b4 {
background-color: yellow;
padding: 16px;
}
</style>
</head>
<body>
<button class="button b1">15px 32px</button>
<button class="button b2">24px 50px</button>
<button class="button b3">32px 32px</button>
<button class="button b4">16px</button>
</body>
</html>
Output:
font-size: This property is used to set the size of the text in the button. Change the pixel value to get the desired size.
Syntax:
element {
font-size: style;
}
Example: This example describes the Button with the font-size property to adjust the font of the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button font-size property </title>
<style>
.button {
padding: 15px 32px;
border: none font-size: 16px;
}
.b1 {
background-color: red;
font-size: 10px;
}
.b2 {
background-color: blue;
font-size: 15px;
}
.b3 {
background-color: green;
font-size: 20px;
}
.b4 {
background-color: yellow;
font-size: 30px;
}
</style>
</head>
<body>
<button class="button b1">10px </button>
<button class="button b2">15px</button>
<button class="button b3">20px</button>
<button class="button b4">30px</button>
</body>
</html>
Output:
border-radius: This property is used to set the border-radius of the button. It sets the rounded corners of the border.
Syntax:
element {
border-radius: property;
}
Example: This example describes the Button with the border-radius property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button border-radius property </title>
<style>
.b {
padding: 15px 32px;
border: none;
font-size: 16px;
}
.b1 {
background-color: red;
border-radius: 3px;
}
.b2 {
background-color: blue;
border-radius: 6px;
}
.b3 {
background-color: green;
border-radius: 10px;
}
.b4 {
background-color: yellow;
border-radius: 20px;
}
.b5 {
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<button class="b b1">3px </button>
<button class="b b2">6px</button>
<button class="b b3">10px</button>
<button class="b b4">20px</button>
<button class="b b5">50%</button>
</body>
</html>
Output:
box-shadow: This property is used to create the shadow of the button box.
Syntax:
box-shadow: [horizontal offset] [vertical offset] [blur radius]
[optional spread radius] [color];
Example: This example describes the Button with the box-shadow property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button box-shadow property </title>
<style>
.b {
padding: 15px 32px;
border: none font-size: 16px;
color: white;
}
.b1 {
background-color: green;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button class="b b1">Shadow 1 </button>
</body>
</html>
Output:
width: This property is used to set the width of the button.
Syntax:
element {
width: property;
}
Example: This example describes the Button with the width property to set the width of the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>button width property</title>
<style>
.button {
padding: 15px 32px;
border: none;
font-size: 16px;
color: white;
}
.b1 {
background-color: red;
width: 100px;
}
.b2 {
background-color: blue;
width: 200px;
}
.b3 {
background-color: green;
width: 50%;
}
.b4 {
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<button class="button b1">100px </button>
<button class="button b2">200px </button>
<button class="button b3">50% </button>
<button class="button b4">100%</button>
</body>
</html>
Output:
Hover Effects: This property is used to change the button interface when the mouse moves over.
Syntax:
element:hover {
// CSS property
}
Example: This example describes the Button with the hovering effect on the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>button width property</title>
<style>
.button {
padding: 15px 32px;
border: none font-size: 16px;
color: white;
transition-duration: 0.3s;
}
.b1 {
background-color: green;
}
.b2 {
background-color: orange;
}
.b1:hover {
background-color: white;
color: orange;
}
.b2:hover {
background-color: white;
color: green;
}
</style>
</head>
<body>
<button class="button b1">Green </button>
<button class="button b2">Orange </button>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Microsoft Edge
- Internet Explorer
- Opera
- Safari
Здарова, бандиты. 
В этом уроке я расскажу и покажу как изменить вид кнопки, текст-бокса и шрифта.
Кнопка
Давайте изменим цвет текста и самой кнопки, ширину и высоту(очень удобная вещь, если изменил в кнопке текст, то не надо её подгонять под текст вручную) и так же уберем обводку вокруг и оставим снизу.
Создаем кнопку и сразу же переходим в eventsheet.
Делаем такое событие: Every tick > наша кнопка > Set CSS style
У нас открывается такое окно:
Property name — Имя свойства(дословный перевод). Сюда мы будем писать, что хотим «изменить» в объекте(в нашем случае кнопки), а в Value значение(код цвета, ссылку на картинку или шрифт и т.п)
Давайте изменим у кнопки цвет текста, фона, размер текста, уберем обводку и оставим ее внизу и сделаем «обивку».
Первым делом изменим цвет текста:
Теперь текст кнопки у нас будет белым цветом. Думаю все знают, что такое код-цвета, если не знаете — загуглите, хотя думаю все понятно тут.
А теперь мы изменили размер шрифта.
Вторым делом изменим цвет фона таким образом:
Теперь фон у нас приятный, голубой цвет. Также можно сделать задний фон картинкой. Чтобы это сделать, надо вместо кода-цвета прописать url(ссылка на картинку). ВНИМАНИЕ! Если вы хотите сделать фон картинкой, то нужно такую картинку, которая подойдет под ширину и высоту кнопки. В этом случае лучше создать спрайт, а не кнопку.
Третьим делом уберем обводку и оставим только снизу:
Объяснять как дышать не буду, вот вам шпаргалка
http://htmlbook.ru/css/border
Четвертым делом сделаем величину полей(обивка в переводе):
Тут тоже думаю говорить нечего, все понятно.
Итого:
Текст-бокс
Тут я просто заменю фон картинкой и все. Все манипуляции предоставленные выше можно использовать и с этим объектом.
Вот, как говорил ранее: url(ссылка на картинку)
Итог:
Простите за такой фон, ничего на ноутбуке годного небыло. 
Так же я изменил цвет, убрал обводку и подогнал высоту под картинку. Объяснить не могу, почему с 22px пришлось сжать до 16px.
Текст
Здесь просто изменю шрифт. Все манипуляции с текстом предоставленные выше можно использовать с этим объектом.
Тут вместо Set CSS style ищем Set web font:
Шрифт взял с Google fonts, очень удобно, юзайте. Font Family — название шрифта, если берете шрифты с сайта, обязательно посмотрите, что написать в font family. ВНИМАНИЕ! Это работает для браузерных игр, если портнете на android скорее всего работать не будет или будет, но с подключенным интернетом.
Итог:
Вот и все. Не кидайте тапками, урок расчитан на новичков. Можно делать много чего, юзайте эти шпаргалки:
http://htmlbook.ru/css/
Последний раз редактировалось PlatiMne 18 янв 2016, 19:00, всего редактировалось 4 раз(а).
Узнайте, как стиль кнопок с помощью CSS.
Основные стили кнопок
Пример
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Цвета кнопок
Используйте свойство background-color для изменения цвета фона кнопки:
Пример
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
Размеры кнопок
Используйте свойство font-size для изменения размера шрифта кнопки:
Пример
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Используйте свойство padding для изменения заполнения кнопки:
Пример
.button1 {padding: 10px
24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Закругленные кнопки
Используйте свойство border-radius для добавления скругленных углов к кнопке:
Пример
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Цветные границы кнопок
Используйте свойство border, чтобы добавить цветную рамку к кнопке:
Пример
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
…
Наведите кнопки
Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.
Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:
Пример
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
…
Кнопки теней
Use the box-shadow property to add shadows to a button:
Пример
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px
16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Отключенные кнопки
Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).
Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:
Пример
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
Ширина кнопки
По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:
Пример
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
Группы кнопок
Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:
Пример
.button {
float: left;
}
Группа кнопок на границе
Используйте свойство border для создания группы кнопок с рамками:
Пример
.button {
float: left;
border: 1px
solid green;
}
Вертикальная группа кнопок
Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:
Пример
.button {
display: block;
}
Кнопка на картинке
Анимированные кнопки
Пример
Добавить стрелку на наведении:
Пример
Добавить «нажатия» эффект на кнопку:
Пример
Исчезать при наведении:
Пример
Добавить эффект «рябь» при щелчке: