CSS Button Width

Please Share On:

Definition:

CSS button font-width is used for user-defined specific width. See an example below of buttons defined in certain width pixels.

Syntax:

.btn1 {width: 100px;}
.btn2 {width: 2in;}
.btn3 {width: 25em;}
.btn4 {width: 100%;}

Source Code:

<!DOCTYPE html>
<html>
      <head>
	  <style>
                #buttons{
                   list-style: none; /*hide bullets*/
                   }
          
		.button {
		  background-color: darkred;
		  border: none;
		  color: white;
		  padding: 10px 20px;
		  text-align: center;
		  text-decoration: none;
                  margin-bottom:2px;
		}

		.btn1 {font-size: 10px;
                       width: 100px;}
          
		.btn2 {font-size: 12px;
                       width: 2in;}
          
		.btn3 {font-size: 14px;
                       width: 25em;}
          
		.btn4 {font-size: 16px;
                       width: 100%;}
	     </style>
	</head>
	
	<body>
	<h2>CSS Button Width</h2>
      
 <ul id="buttons">
    <li><button class="button btn1">width: 100px;</button></li>
	<li><button class="button btn2">width: 3in;</button></li>
	<li><button class="button btn3">width: 25em;</button></li>
	<li><button class="button btn4">width: 100%;</button></li>
 </ul>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may interest on the following topics:

Post Views: 435

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.