How to create and style text buttons with CSS?

In this tutorial, we will learn how to create and style text buttons with CSS? By Apurva Mathur Last updated : July 28, 2023

We have always styled normal text enclosed under a heading tag or paragraph tag or any container. But does the same concept is applied when we style the text of a button? Or do we have to try some other property?

In CSS, if you want to change the style of any text irrespective of the element it is used with the same syntax, and all the text property remains the same. Now, this element can be anything like <span> tag, <div> tag, <button> tag, <input> tag, <label> tag, etc. text style property will remain the same. Now let us just style a text button using CSS.

Creating and styling text buttons with CSS

To create text buttons in HTML, we will use <button> tag. And, to style the text button, we will apply the CSS to make it more stylish. In the following CSS, we are using various properties such as height, width, border, background-color, padding, margin, border-radius, etc. to style the text button. You can simply copy this CSS and use it in your code.

CSS for Creating and styling text buttons

Below are the CSS styles to create and style text buttons. You can directly copy and use these CSS styles to make text buttons stylish and awesome.

<style type="text/css">
/* Styles on button*/
button {
  width: auto;
  height: 50px;
  padding: 8px;
  font-size: 18px;
  background-color: #006969;
  border: 1px solid #004949;
  border-radius: 4px;
  box-shadow: 2px 2px #004949;
  color: #ffffff;
  font-weight: bolder;
  margin: 8px;
}

/* Styles on button Hover*/
button:hover {
  background-color: #009999;
  border: 1px solid #009999;
  border-radius: 4px;
  box-shadow: 2px 2px #009999;
  cursor: pointer;
}

.more-stylish1 {
  background-image: linear-gradient(to left, #009999, #ccc, #f40);
  text-shadow: 1px 1px #333;
}

.more-stylish2 {
  background-image: linear-gradient(to right, #f90, #f40, #f90);
  text-shadow: 1px 1px #333;
  border: 1px solid #f40;
}

.red {
  color: red;
}

.yellow {
  color: yellow;
}

.pink {
  color: deeppink;
}

.green {
  color: #4CAF50;
}
</style>

Example to create and style text buttons with CSS

In this example, we are creating multiple text buttons and styling them using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <style type="text/css">
    /* Styles on button*/
    button{
    width: auto;
    height: 50px;
    padding: 8px;
    font-size: 18px;
    background-color: #006969;
    border: 1px solid #004949;
    border-radius: 4px;
    box-shadow: 2px 2px #004949;
    color: #ffffff;
    font-weight: bolder;
    margin: 8px;
    }
  
  /* Styles on button Hover*/
    button:hover
    {
    background-color: #009999;
    border: 1px solid #009999;
    border-radius: 4px;
    box-shadow: 2px 2px #009999;
    cursor: pointer;
    }

    .more-stylish1
    {
    background-image: linear-gradient(to left, #009999, #ccc, #f40);
    text-shadow: 1px 1px #333;
    }

    .more-stylish2
    {
    background-image: linear-gradient(to right, #f90, #f40, #f90);
    text-shadow: 1px 1px #333;
    border: 1px solid #f40;
    }  

    .red{
    color: red;
    }
    .yellow{
    color: yellow;
    }
    .pink{
    color: deeppink;
    }
    .green{
    color: #4CAF50;
    }
  </style>
  
  <body>
    <button>Default without class for color</button>
    <button class="red">Button 1</button>
    <button class="yellow">Button 2</button>
    <button class="pink">Button 3</button>
    <button class="green">Button 4</button>
    <hr />
    <button class="more-stylish1">More Stylish Button (1)</button>
    <button class="more-stylish2">More Stylish Button (2)</button>
  </body>
</html>

The output of the above example is:

Explanation

Here I've just specified different classes to each button as this will apply the property uniquely to a particular class. Rest all properties are just setting the alignment so that it seems to be even, these properties are explicitly optional or can be changed up to your desire.

CSS Examples »

How to create Previous and Next buttons with CSS?

How to hide an element when printing a web page?