CSS Button Style

CSS button style: Using CSS properties, we can easily modify the default BUTTON and enhance its appearances using simple graphic commands.

TYPES OF BUTTON STYLE: -

Program to change button using CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   . button {
   background-color: purple;
   border: none;
   font-size: 10px;
   color: white;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   }
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button> default button </button>
 <h2> 2) CSS Button </h2>
 <button class = " button "> CSS button </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, we have declared a class BUTTON with elements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: white; => to change the colour of text to white
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
In the body we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 2 < BUTTON > tags. The first button is the default HTML button, and the second button with the class button adds all the properties of the button class to our button with the name default button.

Program to change the color of button using the background-color property of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: white;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
  /* CSS properties to change button background color*/
 .button1_color { background-color: #4CAF50; } /* Green */
 .button2_color {
   background-color: #008CBA;
   } /* Blue */
 .button3_color {
   background-color: #f44336;
   } /* Red */
 .button4_color {
   background-color: #ec8fd0;
   } /* Pink */
 .button5_color {
   background-color: #555555;
   } /* Black */
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button> default button </button>
 <h2> 2) Coloured Button </h2>
 <button class = " button button1_color " > Green </button>
 <button class = " button button2_color " > Blue </button>
 <button class = " button button3_color " > Red </button>
 <button class = " button button4_color " > Grey </button>
 <button class = " button button5_color " > Black </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first, we have declared a class BUTTON to create a basic CSS button with elements
Background – color: purple; => to change the color of button to purple
Border: none; => to remove the default border of the button to null
Font - size: 10px; => to increase the text size of button to 10px
color: white; => to change the color of the text to white
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON, we have declared 5 classes BUTTON1_COLOR, BUTTON2_COLOR, BUTTON3_COLOR, BUTTON4_COLOR, BUTTON5_COLOR, to create multiple buttons with different colors.
Background - color: #4CAF50; to change the color of button to green
Background - color: #008CBA; to change the color of button to blue
Background - color: #f44336; to change the colour of button to red
Background - color: #ec8fd0; to change the colour of button to pink
Background - color: #555555; to change the color of button to black
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 6 < BUTTON > tags. The first button is the default HTML button and rest button with class BUTTON1_COLOR, BUTTON2_COLOR, BUTTON3_COLOR, BUTTON4_COLOR, BUTTON5_COLOR, to create multiple buttons with different colors along with their name.

Program to change the size of a button using the Font - size property of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button {
   background-color: purple;
   border: none;
   font-size: 10px;
   color: white;
   padding: 10px 15px; 
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;
   }
 /* css properties to change button size using font size */
 .button1_size { font-size: 5px; }
 .button2_size { font-size: 10px; }
 .button3_size { font-size: 15px; }
 .button4_size { font-size: 20px; }
 .button5_size { font-size: 25px; }
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button> default button </button>
 <h2> 2) Button size according to font </h2>
 <button class = " button button1_size " > 5px </button>
 <button class = " button button2_size " > 10px </button>
 <button class = " button button3_size " > 15px </button>
 <button class = " button button4_size " > 20px </button>
 <button class = " button button5_size " > 25px </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first we have declared a class BUTTON to create a basic CSS button with elements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: white; => to change the colour of text to white
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON we have declared 5 classes BUTTON1_SIZE, BUTTON2_ SIZE, BUTTON3_ SIZE, BUTTON4_ SIZE, BUTTON5_ SIZE, to create multiple buttons with different sizes,
Font - size: 5px; => to change the size of button to 5px
Font - size: 10px; => to change the size of button to 10px
Font - size: 15px; => to change the size of button to 15px
Font - size: 20px; => to change the size of button to 20px
Font - size: 25px; => to change the size of button to 25px
In the body we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 6 < BUTTON > tag first button is default HTML button and rest button with class BUTTON1_SIZE, BUTTON2_ SIZE, BUTTON3_ SIZE, BUTTON4_ SIZE, BUTTON5_ SIZE, to create multiple buttons with different size along with their name.

Program to change the size of a button using the Padding property of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: white;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
 /* CSS properties to change button size using padding*/
 .button1_padding { padding: 10px 20px; }
 .button2_padding { padding: 5px 25px; }
 .button3_padding { padding: 15px 40px; } 
 .button4_padding { padding: 16px; }
 .button5_padding { padding: 30px 15px; }
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button> default button </button>
 <h2> 2) Button size according to Padding </h2>
 <button class = " button button1_padding " > 10px 20px </button>
 <button class = " button button2_padding " > 5px 25px </button>
 <button class = " button button3_padding " > 15px 40px </button>
 <button class = " button button4_padding " > 16px </button>
 <button class = " button button5_padding " > 30px 15px </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first we have declared a class BUTTON to create a basic CSS button with elements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: white; => to change the colour of text to white
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON we have declared 5 classes BUTTON1 _ PADDING, BUTTON2 _ PADDING, BUTTON3 _ PADDING, BUTTON4 _ PADDING, BUTTON5 _ PADDING, to create multiple buttons with different padding
padding: 10px 20px; => to add padding of size 10px (top - bottom) 20px (left - right)
padding: 5px 25px; => to add padding of size 5px (top - bottom) 25px (left - right)
padding: 15px 40px; => to add padding of size 15px (top - bottom) 40px (left - right)
padding: 16px; => to add padding of size 16px (top – left – bottom – right)
padding: 30px 15px; => to add padding of size 30px (top - bottom) 15px (left - right)
In the body we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 6 < BUTTON > tag first button is default HTML button and rest button with class BUTTON1 _ PADDING, BUTTON2 _ PADDING, BUTTON3 _ PADDING, BUTTON4 _ PADDING, BUTTON5 _ PADDING, to create multiple buttons with different padding along with their name.

Program to change the roundness of button using the Border – radius property of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: white;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
 /* CSS properties to change button roundness using border radius*/
 .button1_round { border-radius: 50%; }
 .button2_round { border-radius: 15px; }
 .button3_round { border-radius: 10px; }
 .button4_round { border-radius: 5px;  }
 .button5_round { border-radius: 1px; }
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button> default button </button>
 <h2> 2) Border Button </h2>
 <button class = " button button1_round " > 50% </button>
 <button class = " button button2_round " > 15px </button>
 <button class = " button button3_round " > 10px </button>
 <button class = " button button4_round " > 5px </button>
 <button class = " button button5_round " > 1px </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first we have declared a class BUTTON to create a basic CSS button with elements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: white; => to change the colour of text to white
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON we have declared 5 classes BUTTON1 _ ROUND, BUTTON2 _ ROUND, BUTTON3 _ ROUND, BUTTON4 _ ROUND, BUTTON5 _ ROUND, to create multiple buttons with different roundness
border - radius: 50%; => to change the roundness of button to 50%
border - radius: 15px; => to change the roundness of button to 15px
border - radius: 10px; => to change the roundness of button to 10px
border - radius: 5px; => to change the roundness of button to 5px
border - radius: 1px; => to change the roundness of button to 1px
In the body we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 6 < BUTTON > tag first button is default HTML button and rest button with class BUTTON1 _ ROUND, BUTTON2 _ ROUND, BUTTON3 _ ROUND, BUTTON4 _ ROUND, BUTTON5 _ ROUND, to create multiple buttons with different roundness along with their name.

Program to create a hollow colored button using the Border radius property of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: white;
   border: none;
   font-size: 10px;
   color: black;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
 /* CSS properties to change button roundness using border radius*/
 .button1_hollow { border: 3px solid #4CAF50; } /* Green */
 .button2_hollow { border: 3px solid #008CBA; } /* Blue */
 .button3_hollow { border: 3px solid #f44336; } /* Red */
 .button4_hollow { border: 3px solid #ec8fd0;  } /* Pink */
 .button5_hollow { border: 3px solid #555555; } /* Black */ </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button> default button </button>
 <h2> 2) Hollow Button </h2>
 <button class = " button button1_hollow " > Green </button>
 <button class = " button button2_hollow " > Blue </button>
 <button class = " button button3_hollow " > Red </button>
 <button class = " button button4_hollow " > Pink </button>
 <button class = " button button5_hollow " > Black </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first we have declared a class BUTTON to create a basic CSS button with elements
Background – color: white; => to change the colour of button to white
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: black; => to change the colour of text to black
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON we have declared 5 classes BUTTON1 _ HOLLOW, BUTTON2 _ HOLLOW, BUTTON3 _ HOLLOW, BUTTON4 _ HOLLOW, BUTTON5 _ HOLLOW, to create multiple hollow buttons with different colour
border: 3px solid #4CAF50 => to create solid border of 3px with green colour
border: 3px solid #008CBA => to create solid border of 3px with blue colour
border: 3px solid #f44336 => to create solid border of 3px with red colour
border: 3px solid #ec8fd0 => to create solid border of 3px with pink colour
border: 3px solid #555555 => to create solid border of 3px with black colour
In the body we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 6 < BUTTON > tag first button is default HTML button and rest button with class BUTTON1 _ HOLLOW, BUTTON2 _ HOLLOW, BUTTON3 _ HOLLOW, BUTTON4 _ HOLLOW, BUTTON5 _ HOLLOW, to create multiple colored hollow buttons with their name.

Program to create colored changing button when hovered using Hover pseudo-class of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: white;
   border: none;
   font-size: 10px;
   color: black;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
 /* CSS properties to change button background color*/
 .button1_hover { background-color: #4CAF50; }
 .button1_hover:hover { background-color: white;
                        color: black;
                        border: 3px solid #4CAF50; }
 .button2_hover { background-color: #008CBA; }
 .button2_hover:hover { background-color: white;
                        color: black;
                        border: 3px solid #008CBA; } /* Blue */
 .button3_hover { background-color: #f44336; }
 .button3_hover:hover { background-color: white;
                        color: black;
                        border: 3px solid #f44336; } /* Red */
 .button1_hover2 { color: black;
                   border: 3px solid #4CAF50; } /* Green */
 .button1_hover2:hover { background-color: #4CAF50;
                         color: white; }
 .button2_hover2 { color: black;
                   border: 3px solid #008CBA; } /* Blue */
 .button2_hover2:hover { background-color: #008CBA;
                         color: white; }
 .button3_hover2 { color: black;
                   border: 3px solid #f44336; } /* Red */
 .button3_hover2:hover { background-color: #f44336;
                         color: white; }
 </style>
 </head>
 <body>
 <h2> Hover Button </h2>
 <button class = " button button1_hover " > Green </button>
 <button class = " button button2_hover " > Blue </button>
 <button class = " button button3_hover " > Red </button>
 <h2> Hover Button </h2>
 <button class = " button button1_hover2 " > Green </button>
 <button class = " button button2_hover2 " > Blue </button>
 <button class = " button button3_hover2 " > Red </button> </body>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first, we have declared a class BUTTON to create a basic CSS button with elements
Background – color: white; => to change the color of button to white
Border: none; => to remove the default border of the button to null
Font - size: 10px; => to increase the text size of button to 10px
color: black; => to change the color of the text to black
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON, we have declared 3 classes BUTTON1 _ HOVER, BUTTON2 _ HOVER, BUTTON3 _ HOVER, to create multiple hover buttons with different color
Background - color: #4CAF50; to change the color of button to green
Background - color: #008CBA; to change the color of button to blue
Background - color: #f44336; to change the colour of button to red
For every button _ hover class, we have used a pseudo class (: HOVER), which will come into action when we drag our mouse over the element we have declared 3 pseudo classes BUTTON1 _ HOVER: HOVER, BUTTON2 _ HOVER: HOVER, BUTTON3 _ HOVER: HOVER to create multiple hover buttons which will change color when we hover over them
Background - color: white; => to change the color of button to white
color: black; =>to change the color of the text to black
border: 3px solid #4CAF50; => to create solid border of 3px with green colour
border: 3px solid #008CBA; => to create solid border of 3px with blue colour
border: 3px solid #f44336; => to create solid border of 3px with red colour
The above mentioned properties come into action only when we hover over them.
Along with the previous BUTTON, we have declared 3 more classes BUTTON1 _ HOVER2, BUTTON2 _ HOVER2, BUTTON3 _ HOVER2, to create multiple hover buttons with different color
color: black; =>to change the color of the text to black
border: 3px solid #4CAF50; => to create solid border of 3px with green colour
border: 3px solid #008CBA; => to create solid border of 3px with blue colour
border: 3px solid #f44336; => to create solid border of 3px with red colour
For every button _ hover class, we have used a pseudo class (: HOVER), which will come into action when we drag our mouse over the element we have declared 3 pseudo classes BUTTON1 _ HOVER2: HOVER, BUTTON2 _ HOVER2: HOVER, BUTTON3 _ HOVER2: HOVER to create multiple hover buttons which will change color when we hover over them
color: white; =>to change the color of the text to white
Background - color: #4CAF50; => to change the colour of button to green
Background - color: #008CBA; => to change the colour of button to blue
Background - color: #f44336; => to change the colour of button to red
The above mentioned properties come into action only when we hover over them.
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 6 < BUTTON > tags first 3 buttons with class BUTTON1 _ HOVER, BUTTON2 _ HOVER, BUTTON3 _ HOVER to create multiple colored hollow buttons with their name. and the following 3 buttons with classes BUTTON1 _ HOVER2, BUTTON2 _ HOVER2, BUTTON3 _ HOVER2 to create multiple colored hollow buttons with their name

Program to create a button with shadow when hovered using Hover pseudo class of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: black;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
 /* CSS properties to add shadow to button */
 .button1_shadow {
   box-shadow: 0 7px 15px 0
   rgba(0,0,0,0.6), 0 8px 22px 0
   rgba(0,200,0,0.19);
 }
 .button2_shadow:hover {
   box-shadow: 0 10px 14px 0
   rgba(0,0,0,0.8),0 18px 48px 0
   rgba(0,0,0,0.22);
 }
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button class = " button " > default button </button>
 <h2> Shadow Button </h2>
 <button class = " button button1_shadow " > BUTTON 1 </button>
 <h2> Shadow Button when hovered </h2>
 <button class = " button button2_shadow " > BUTTON 2 </button> </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first we have declared a class BUTTON to create a basic CSS button with elements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: black; => to change the colour of text to black
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON we have declared a class BUTTON1 _ SHADOW, to create button with shadow
Box – shadow: 0 7px 15px 0 rgba(0,0,0,0.6), 0 8px 22px 0 rgba(0,200,0,0.19); => to create a shadow below our button

(standard SYNTAX for shadow => horizontal-offset vertical-offset blur spread colour)

For BUTTON1 _ SHADOW class we have used a pseudo class (: HOVER) which will come in to action when we drag our mouse over the element we have declared a pseudo class BUTTON1 _ SHADOW: HOVER, to create a hover shadow button which will add shadow to the button when we hover over them
box-shadow: 0 10px 14px 0 rgba(0,0,0,0.8),0 18px 48px 0 rgba(0,0,0,0.22); => to create a shadow below our button
The above mentioned property comes in to action only when we hover over them.
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 3 < BUTTON > tags. The first button is the default HTML button, and the rest of the buttons with class BUTTON1 _ SHADOW, BUTTON2 _ SHADOW create multiple shadow buttons with their name.

Program to create a disabled button with CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: black;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
  /* CSS properties to add a disabled button */
 .button1_disabled {
   opacity: 0.7;
   cursor: not-allowed;
 }
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button class = " button " > default button </button>
 <h2> Disabled Button </h2>
 <button class = " button button1_disabled " > DISABLED </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first we have declared a class BUTTON to create a basic CSS button with elements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: black; => to change the colour of text to black
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON we have declared a class BUTTON1 _ DISABLED, to create a disabled button
Opacity: 0.7; => to blur the button
Cursor: not - allowed; => to change the mouse pointer to cross when we hover above button
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 2 < BUTTON > tags first button is the default HTML button, and the rest button with class BUTTON1 _ DISABLED to create a disabled button with their name.

Program to create buttons with different length using width property of CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
   .button{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: black;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   margin: 5px 3px;}
  /* CSS properties to make a button with variable width */
 .button1_wide {width: 100px;}
 .button2_wide {width: 25%;}
 .button3_wide {width: 50%;}
 .button4_wide {width: 100%;}
 </style>
 </head>
 <body>
 <h2> 1) Default Button </h2>
 <button class = " button " > default button </button>
 <h2> 2) Button with different width </h2>
 <button class = " button button1_wide " > button 100px </button> <br>
 <button class = " button button2_wide " > button 25% </button>
 <br>
 <button class = " button button3_wide " > button 50% </button>
 <br>
 <button class = " button button4_wide " > button 100% </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

Here in this program, first we have declared a class BUTTON to create a basic CSS button with elements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Font - size: 10px; => to increase the text size of button to 10px
color: black; => to change the colour of text to black
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
Along with class BUTTON we have declared a class BUTTON1 _ WIDE, BUTTON2 _ WIDE, BUTTON3 _ WIDE, BUTTON4 _ WIDE, to create buttons with variable width
width: 100px; => to create a button with width of 100px
width: 25%; => to create a button with width of 25%
width: 50%; => to create a button with width of 50%
width: 100%; => to create a button with width of 100%
In the body we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 5 < BUTTON > tags. The first button is the default HTML button, and the rest button with class BUTTON1 _ WIDE, BUTTON2 _ WIDE, BUTTON3 _ WIDE, BUTTON4 _ WIDE to create multiple variable length buttons with their name.

Program to create group buttons with CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
 /* CSS properties to make horizontal group buttons */
  .buttonH{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: white;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   float:left;
   border: 1px solid black;
   }
   .buttonH:hover {
   background-color: #3e8e41;
   border: 1px solid green;
   }
 /* CSS properties to make vertical group buttons */
   .buttonV{
   background-color: purple;
   border: none;
   font-size: 10px;
   color: white;
   padding: 10px 15px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   display:block;
   Width: 100px;
   border: 1px solid black;
   }
   .buttonV:hover{
    border: 1px solid green;
    background-color: #3e8e41;
 }
 </style>
 </head>
 <body>
 <h2> Group Button </h2>
 <button class = " buttonH " > Home </button>
 <button class = " buttonH " > Tools </button>
 <button class = " buttonH " > Contact </button>
 <button class = " buttonH " > Blog </button>
 <br> <br>
 <h2> Vertical Group Button </h2>
 <button class = " buttonV " > Home </button>
 <button class = " buttonV " > Tools </button>
 <button class = " buttonV " > Contact </button>
 <button class = " buttonV " > Blog </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

=> WHEN WE HOVER OVER HORIZONTAL GROUP

=> WHEN WE HOVER OVER VERTICAL GROUP

Here in this program, first, we have declared a class BUTTONH to create a basic HORIZONTAL CSS button with elements
Background – color: purple; => to change the color of button to purple
Border: none; => to remove the default border of the button to null
Font - size: 10px; => to increase the text size of button to 10px
color: black; => to change the color of the text to black
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: inline - block; => to create our element to block and we can use block properties onwards
float: left; => to adjust elements to the left side of the previous element
border: 1px solid black; => to add a black solid border of 1px between buttons
For BUTTONH class, we have used a pseudo class (: HOVER), which will act when we drag our mouse over the element. We have declared a pseudo class BUTTONH: HOVER, to create a hover group button that will highlight when we hover over them
Background - color: #3e8e41; => to change the colour of button to green
border: 1px solid green; => to add a green solid border of 1px between buttons
The above mentioned property comes into action only when we hover over them
Along with class BUTTONH, we have declared another button, BUTTONV, to create vertical group buttons
Background – color: purple; => to change the color of button to purple
Border: none; => to remove the default border of the button to null
Font - size: 10px; => to increase the text size of button to 10px
color: black; => to change the color of the text to black
padding: 10px 15px; => to add padding area to button
cursor: pointer; => to change the mouse pointer to hand when we hover above button
text - align: center; => to align the text inside button to centre
text - decoration: none; =>to remove the default text decoration to null
display: block; => to create our element to block, and we can use block properties onwards
Width: 100px; => to create a button with width of 100px
border: 1px solid black; => to add a black solid border of 1px between buttons
For BUTTONV class, we have used a pseudo class (: HOVER), which will come into action when we drag our mouse over the element. We have declared a pseudo class BUTTONV: HOVER, to create a hover group button that will highlight when we hover over them
Background - color: #3e8e41; => to change the colour of button to green
border: 1px solid green; => to add a green solid border of 1px between buttons
The above mentioned property comes into action only when we hover over them
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 8 < BUTTON > tags first 4 buttons will be the horizontal group buttons with class BUTTONH to create horizontal group buttons with different names. And the rest 4 buttons will be the vertical group buttons with class BUTTONV to create vertical group buttons with different names.

Program to create a fading button with CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
 div{
     float:left;
     margin:10px;
    }
 /* CSS properties to make fade button */
   .btn {
   background-color: #ddd;
   border: none;
   color: black;
   padding: 15px 30px;
   text-align: center;
   font-size: 15px;
   margin: 5px 1px;
   opacity: 1;
   transition: 0.5s;
   cursor: pointer;
 }
 .btn:hover {
   background-color: purple;
   color: white;
 }
 /* css properties to make fade in button */
 .btn1 {
   background-color: purple;
   border: none;
   color: white;
   padding: 15px 30px;
   text-align: center;
   font-size: 15px;
   margin: 5px 1px;
   opacity: 0.5;
   transition: 0.5s;
   cursor: pointer;
 }
 .btn1:hover {opacity: 1}
 /* css properties to make fade out button */
 .btn2 {
   background-color: purple;
   border: none;
   color: white;
   padding: 15px 30px;
   text-align: center;
   font-size: 15px;
   margin: 5px 1px;
   opacity: 1;
   transition: 0.5s;
   cursor: pointer;
 }
 .btn2:hover {opacity: 0.5}
 </style>
 </head>
 <body>
 <div>
 <h2> Fade button </h2>
 < button class = " btn " > Hover </button>
 </div>
 <div> 
 <h2> Fade in Button </h2>
 <button class = " btn1 " > Hover </button>
 </div>
 <div> 
 <h2> Fade out Button </h2>
 <button class = " btn2 " > Hover </button>
 </div>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

NORMAL BUTTONS

=> FADE BUTTON WHEN HOVERED

=> FADE - IN BUTTON WHEN HOVERED

=> FADE - OUT BUTTON WHEN HOVERED

Here in this program, first, we have declared a class BTN to create a basic FADE button using CSSelements
Background – color: #ddd;; => to change the colour of button to light grey
Border: none; => to remove the default border of the button to null
Color: black; => to change the color of the text to black
padding: 15px 30px; => to add padding area to button
text - align: center; => to align the text inside button to centre
Font - size: 15px; => to increase the text size of button to 10px
margin: 5px 1px; => to add margin to button
opacity: 1; => to make button visible
transition: 0.5s; => to delay the button animation
cursor: pointer; => to change the mouse pointer to hand when we hover above button
For BTN class, we have used a pseudo class (: HOVER), which will come into action when we drag our mouse over the element. We have declared a pseudo class BTN: HOVER, to create a hover group button that will highlight when we hover over them
Background - color: purple; => to change the color of button to purple
Color: white; => to change the color of the text to white.
The above mentioned property comes into action only when we hover over them
Along with class BTN, we have declared another button, BTN1, to create a fade in button
Background – color: purple; => to change the color of button to purple
Border: none; => to remove the default border of the button to null
color: white; => to change the color of the text to white
padding: 15px 30px; => to add padding area to button
text - align: center; => to align the text inside button to centre
Font - size: 15px; => to increase the text size of button to 10px
margin: 5px 1px; => to add margin to button
opacity: 0.5s; => to add opacity to button
transition: 0.5s; => to delay the button animation
cursor: pointer; => to change the mouse pointer to hand when we hover above button
For the BTN1 class, we have used a pseudo class (: HOVER), which will act when we drag our mouse over the element. We have declared a pseudo class BTN1: HOVER to create a hover group button that will highlight when we hover over them
opacity: 1s; => to add opacity to button
The above mentioned property comes into action only when we hover over them
we have declared another button, BTN2, to create a fade out button
Background – color: purple; => to change the color of button to purple
Border: none; => to remove the default border of the button to null
color: white; => to change the color of the text to white
padding: 15px 30px; => to add padding area to button
text - align: center; => to align the text inside button to centre
Font - size: 15px; => to increase the text size of button to 10px
margin: 5px 1px; => to add margin to button
opacity: 1s; => to add opacity to button
transition: 0.5s; => to delay the button animation
cursor: pointer; => to change the mouse pointer to hand when we hover above button
For the BTN2 class, we have used a pseudo class (: HOVER), which will come into action when we drag our mouse over the element. We have declared a pseudo class BTN2: HOVER to create a hover group button that will highlight when we hover over them
opacity: 0.5s; => to add opacity to button
The above mentioned property comes into action only when we hover over them
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 3 < BUTTON > tags. The first button will be the fade button with class BTN to create a simple fade button with animation. The second button will be the fade in button with class BTN1 to create a fade in button which will become bright when we hover over it, and finally, the third button will be the fade out button with class BTN2 to create a fade out button which will become dull when we hover over it

Program to create a split button with CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
 .button {
    background-color: purple;
    color: white;
    padding: 10px 15px;
    border: none;
    outline: none;
    font-size: 10px;
    cursor:pointer;
    border-left: 1px solid maroon;
    text-decoration: none; 
 }
 .dropMenu {
    position: absolute;
    display: inline-block;
   }
 .dropContent {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
   z-index: 1;
 }
 .dropContent .link {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }
 .dropContent .link:hover {
    background-color: #ddd
 }
 .dropMenu:hover .dropContent {
    display: block;
 }
 .btn:hover,
 .dropMenu:hover .btn {
    background-color: maroon;
 }
 </style>
 </head>
 <body>
 <h2> Split Button </h2>
 <button class = " btn button " > Button </button>
 <div class = " dropMenu " >
 <button class = " btn button " >  > </button>
 <div class = " dropContent " >
 <a class = " link " href = " # " > home </a>
 <a class = " link " href = " # " > content </a>
 <a class = " link " href = " # " > contact us </a>
 <a class = " link " href = " # " > map </a> 
 </div>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

=> NORMAL SPLIT BUTTON

=> SPLIT BUTTON WHEN HOVERED

=> SPLIT BUTTON WHEN HOVERED OVER ARROW

=> SPLIT BUTTON WHEN HOVERED OVER THE ELEMENTS OF ARROW

Here in this program, first, we have declared a class BUTTON to create a basic button using CSSelements
Background - color: purple; => to change the color of button to purple
color: white; => to change the color of the text to white
padding: 10px 15px; => to add padding to the button
border: none; => to remove the default border of button
outline: none; => to remove the default outline of the button
font-size: 10px; => to increase the font size to 10px
cursor: pointer; => to change the cursor to pointer
border - left: 1px solid maroon; => to add a simple border on the left side of button
text - decoration: none; => to remove all the default text decoration
Also, we have declared another class, DROP CONTENT, to create a drop down menu with multiple elements.
display: none; => to make the element disappear
position: absolute; => to add a position about the main screen
background-color: #f1f1f1; => to change the colour of background to grey
min-width: 160px; => to set a minimum width of element to 160px
z-index: 1; => to align elements one behind other
With the DROP CONTENT class, we have used the child class DROP CONTENT LINK, which will inherit the properties from the parent class.
color: black; => to change the color of the text to black
padding: 12px 16px; => to add padding to the elements
text-decoration: none; => to remove the default decoration of text
display: block; => to change the elements to block to work with properties of the block.
For the DROP CONTENT LINK class, we have used a pseudo class (: HOVER), which will act when we drag our mouse over the element. We have declared a pseudo class DROUPCONTENT LINK: HOVER, to create a hover group button that will highlight when we hover over them
Background - color: #ddd; => to change the colour of background to grey
For the DROP MENU DROP CONTENT class, we have used a pseudo class (: HOVER), which will act when we drag our mouse over the element. We have declared a pseudo class DROUPMENU: HOVER DROP CONTENT, to create a hover group button that will highlight when we hover over them
display: block; => to change the elements to block to work with properties of the block.
The above mentioned property comes into action only when we hover over them
For the BTN DROP MENU class, we have used a pseudo class (: HOVER), which will act when we drag our mouse over the element. We have declared a pseudo class DROUPMENU: HOVER BTN: HOVER, to create a hover group button which will highlight when we hover over them
background-color: maroon; => to change the color of the button to maroon
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used 2 < BUTTON > tags. The first button will be the main button with class BTN and BUTTON to create a simple button with animation. The second button will be the split button with class BTN, BUTTON, and DROP MENU to create a split button that will expand when we hover over it, and finally, we have added links for the split button, which will become dull when we hover over it

Program to create an animated button with CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
 .button {
   padding: 10px 15px;
   font-size: 20px;
   text-align: center;
   cursor: pointer;
   outline: none;
   color: #fff;
   background-color: purple;
   border: none;
   border-radius: 12px;
   box-shadow: 0 9px #999;
 }
 .button:hover {background-color: #660033}
 .button:active {
   background-color: purple;
   box-shadow: 0 5px #666;
   transform: translateY(6px);
 }
 </style>
 </head>
 <body>
 <h2> Animated Button </h2>
 <button class = " button " > Click </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

=> NORMAL ANIMATED BUTTON

=> ANIMATED BUTTON WHEN HOVERED

=> ANIMATED BUTTON WHEN CLICKED

Here in this program, first, we have declared a class BUTTON to create a basic button using CSSelements
padding: 10px 15px; => to add a padding to the button
font - size: 20px; => to change the font size of text to 20px
text - align: center; => to align the content of element in centre
cursor: pointer; => to change the cursor to the pointer when hovered over an element
outline: none; => to remove the default outline
color: white; => to change the color of the text to white
background - color: purple; => to change the colour of button to purple
border: none; => to remove the default border of button
border - radius: 12px; => to add a radius to the button
box - shadow: 0 9px #999; => to add a shadow of define size to the element
For the BUTTON class, we have used a pseudo class (: HOVER), which will act when we drag our mouse over the element. We have declared a pseudo class BUTTON: HOVER, to create a hover group button that will highlight when we hover over them
Background - color: maroon; => to change the color of the button to maroon
The above mentioned property comes into action only when we hover over them
For the BUTTON class, we have used a pseudo class (: ACTIVE), which will perform some action when we click on the element. We have declared a pseudo class BUTTON: ACTIVE
Background - color: purple; => to change the color of button to purple
Box - shadow: 0 5px #666; => to add shadow to the element
transform: translateY(6px); => to move the element along Y-axis
these actions will only take place when we click over the element
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have used < BUTTON > tags. The first button will be the animation button with class BUTTON to create a simple button with animation, which will change color and display the clicking animation when we click over it.

Program to create a button with an image using CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
 .container {
   position: relative;
   width: 20%;
   max-width: 400px;
 }
 .container img {
   width: 50%;
   height: auto;
 }
 .container .btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate (-50%, -50%);
   -ms-transform: translate (-50%, -50%);
   background-color: purple;
   color: white;
   font-size: 16px;
   padding: 12px 24px;
   border: none;
   cursor: pointer;
   border-radius: 5px;
   text-align: center;
 }
 .container .btn:hover {
   background-color: maroon;
 }
 </style>
 </head>
 <body>
 <h2> Button on Image </h2>
 <div class = " container " >
   <img src = " https://images.unsplash.com/photo-1618418359809-0758e4cc4f3f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 " style = " width:100%;" >
   <button class = " btn "> Button </button>
 </div>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

=> NORMAL BUTTON WITH IMAGE

=> BUTTON WITH IMAGE WHEN HOVERED

Here in this program, first, we have declared a class CONTAINER to create a container with CSSelements
position: relative; => to add a position about the parent class
width: 20%; => to fix the width of element to 20%
max-width: 400px; => to give a maximum width of 400px
With the CONTAINER class, we have used child class CONTAINER IMG which will inherit the properties from the parent class container.
Cursor: pointer; => to change the mouse pointer to hand when we hover above the button
Display: inline-block; => to give the element properties of block
Position: relative; => to add a position in reference to the parent class
transition: 0.5s; => to delay the button animation
With the CONTAINER class, we have used the child class CONTAINER BTN, which will inherit the properties from the parent class container.
position: absolute; => to add a position about the main screen
top: 50%; => to move element to top
left: 50%; => to move element to left
transform: translate (-50%, -50%); => to shift the position of element
background-color: purple; => to change the color of button to purple
color: white; => to change the color of the text to white
font-size: 16px; => to increase the font size to 16px
padding: 12px 24px; => to add padding to the element
border: none; => to remove border of button
cursor: pointer; => to change the cursor to pointer
border-radius: 5px; => to add radius to button
text-align: center; => to align the text to centre
For the CONTAINER BTN class, we have used a pseudo class (: HOVER), which will come into action when we drag our mouse over the element. We have declared a pseudo class CONTAINER BTN: HOVER, to create a hover group button that will highlight when we hover over them
Background-color: maroon; => to change the color of button to maroon
The above mentioned property comes into action only when we hover over them
In the body, we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with the < H2 > tag, we have < img > tag to add the source of the image and < BUTTON > tag with the class button to add properties to the button

Program to create a motion animated button using CSS

 <! DOCTYPE html>
 <html>
 <head>
 <style>
 .button {
   border-radius: 4px;
   background-color: purple;
   border: none;
   color: #FFFFFF;
   text-align: center;
   font-size: 20px;
   padding: 10px 15px;
   width: 150px;
   transition: all 0.5s;
   cursor: pointer;
   margin: 5px;
 }
 .button span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.5s;
 }
 .button span:after {
   content: '->';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
 }
 .button:hover span {
   padding-right: 40px;
 }
 .button:hover span:after {
   opacity: 1;
   right: 0;
 }
 </style>
 </head>
 <body>
 <h2>Animated Button</h2>
 <button class = " button " > <span> Hover </span>
 </button>
 </body>
 </html>

When we execute the code as mentioned above, we will get the following output –

=> NORMAL BUTTON

=> BUTTON WITH ANIMATION WHEN HOVERED

Here in this program, first we have declared a class BUTTON to create a basic button using CSSelements
Background – color: purple; => to change the colour of button to purple
Border: none; => to remove the default border of button to null
Color: white; => to change the colour of text to white
text - align: center; => to align the text inside button to centre
Font - size: 20px; => to increase the text size of button to 20px
padding: 10px 15px; => to add padding area to button
width:150px; => to increase the width of the button to 150px
transition: all 0.5s; => to delay the button animation
cursor: pointer; => to change the mouse pointer to hand when we hover above button
margin: 5px; => to add margin to button
border-radius:4px; => to add a radius to the button
With BUTTON class we have used child class BUTTON SPAN which will inherit the properties from parent class.
Cursor: pointer; => to change the mouse pointer to hand when we hover above button
Display: inline-block; => to give the element properties of block
Position: relative; => to add a position in reference to the parent class
transition: 0.5s; => to delay the button animation
For BUTTON SPAN class we have used a pseudo class (: AFTER) which will add some content after a certain action takes place. We have declared a pseudo class SPAN: AFTER
content: '->'; => to add some content to our element
position: absolute; to add a position in reference to the main screen
opacity: 0; => to make content disappear
top: 0; => to move content upwards
right: -20px; => to move content right
transition: 0.5s; => to delay the button animation
For BUTTON SPAN class we have used a pseudo class (: HOVER) which will come in to action when we drag our mouse over the element. We have declared a pseudo class BUTTON: HOVER SPAN, to create a hover group button which will highlight when we hover over them
padding-right: 40px; => to add padding to button
The above mentioned property comes into action only when we hover over them
For the BUTTON SPAN class, we have used a pseudo class (: AFTER and: HOVER), which will add some content when we hover over the element. We have declared a pseudo class BUTTON: HOVER SPAN: AFTER, to create a hover button which will add some content when we hover over them
opacity: 1; => to make object visible
right: 0; => to shift element to the right
In the body we have declared the < H2 > tag to add heading in our web browser, and with the style element, we have altered the < H2 > element.
Along with < H2 > tag we have used < BUTTON > tag with class button and text wrapped inside < SPAN > to add properties to the button.

CSS Introduction

CSS Attributes

Questions

Difference

Misc

CSS Introduction

CSS Attributes

Questions

Difference

Misc

CSS Button Style