Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change the Font Size of a Button with CSS
To Change the font size of a button with CSS, we will be using two different approaches. In this article, we will see how to change the font size of button using CSS properties.
We are having three different buttons, our task is to change the font size of buttons representing normal, smaller and larger font size of button.
Approaches to Change the Font Size of a Button
Here is a list of approaches to Change the font size of a button with CSS which we will be discussing in this article with step-wise explaination and complete example codes.
Change Font Size using font-size Property
To Change the font size of a button, we will be using CSS font-size property which changes the font size of any element.
- We have used text-align property to center the text and cursor property to change the cursor type when hovering on button.
- We gave used 'font-size: 30px;' to increase the font size of button.
- We gave used 'font-size: 10px;' to decrease the font size of button.
Example
Here is a complete example code implementing above mentioned steps to Change the font size of a button with CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Change the font size of a button with CSS
</title>
<style>
.all {
text-align: center;
cursor: pointer;
}
.button1 {
font-size: 30px;
}
.button2 {
font-size: 10px;
}
</style>
</head>
<body>
<h3>
Change the Font Size of a Button with CSS
</h3>
<p>
In this example we have used CSS font-size
property to change the font size of button
with CSS.
</p>
<button>Normal</button>
<button class="all button1">Larger Font</button>
<button class="all button2">Smaller Font</button>
</body>
</html>
Change Font Size using transform Property
To Change the font size of a button, we will be using CSS transform property using scale() value which resizes any element.
- We have used text-align property to center the text, margin property to apply the margin and cursor property to change the cursor type when hovering on button.
- We gave used 'transform: scale(1.5);' to increase the font size of button.
- We gave used 'transform: scale(0.8)' to decrease the font size of button.
Example
Here is a complete example code implementing above mentioned steps to Change the font size of a button with CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.all {
text-align: center;
cursor: pointer;
margin: 5%;
}
.btn1 {
transform: scale(1.5);
}
.btn2 {
transform: scale(0.8);
}
</style>
</head>
<body>
<h3>
Change the Font Size of a Button with CSS
</h3>
<p>
In this example we have used CSS transform
property to change the font size of button
with CSS.
</p>
<button>Cick me </button>
<button class="all btn1">Larger</button>
<button class="all btn2">Smaller</button>
</body>
</html>
Conclusion
To change the font size of a button with CSS is a simple process. In this article we have discussed two approaches to change the font size of a button which are by using CSS font-size and transform scale() value.
25K+ Views
