CSS Buttons

Prev
Next

CSS Buttons

Buttons are mostly used for 2 purposes-

  • As Links – Buttons can be like normal links which appears as if the link is enclosed inside a box.
  • As Submit function or similar function – This is the most common use of Buttons. When a user fills form or some details and want to submit it to the server.

Button styling

You can style the CSS buttons based on your design using properties. Some of the basic properties are –

  • Border Color using border property.
  • Background color using the background-color property
  • padding
  • margin
  • Remove underline by text-decoration: none
  • align text to the middle using text-align: center

Let us see how the button will look using cursor: pointer property to set the cursor as a pointer.

button with styling

Example of Button Styling​

.button-style {
  padding:15px;
  cursor: pointer;
  background:plum;
}
Run the Code

Button On-Click

Sometimes, when the user clicks the button, a script should run to perform a particular event. The onclick attribute runs a script on the browser to perform an event. This is part of JavaScript.

The Syntax of Button On-Click:
<button onclick=”event-script”>

Example of Button On-Click

<button onclick="getElementById('button-onclick').innerHTML=Date()">Current Time and Date</button>
Run the Code

Button shadow​

The box-shadow property can easily create the shadow for the buttons.

Button Shadow

Example of Button shadow

.btn-shadow {
  padding:18px 40px;
  margin:4px;
  background:#F5F5F5;
  cursor: pointer;
  border:none;
  box-shadow: 4px 8px gray, 0 2px 4px rgba(0,0,0,0.1);
}
Run the Code

Links for Buttons

Some Website Designers prefers to set links on buttons.

You can use the anchor tag and place a button inside it. You can set the style of the button and your linking button is ready.

Example for Linking Buttons

<style>
 button {
  padding:25px;
  width:200px;
  background:turquoise;
  font-size:18px;
 }
</style>

<body>
  <h3>Example to give links for the Buttons</h3>
  <a href="https://www.tutorialbrain.com/">
  <button>Visit TutorialBrain</button>
  </a> 
</body>
Run the Code

Button Input type

The button Input type is similar to button onclick. This informs the browser that the input type is a button

The Syntax of button input type:
<input type=”button” value=”ENTER” id=”button-ip”>

Example of Button Input type

<input type="button" value="ENTER" id="button-ip">
Run the Code

Disable Buttons

On certain occasions, you do not want the buttons to be clickable.

Consider a case, when you want to enable the button only when the user has filled all the important input details.

The cursor: not-allowed property can be used to make the buttons disabled.

The Syntax of disabling buttons:
cursor: not-allowed;

Example to disable buttons

#button-disable {
 padding:25px;
 width:200px;
 cursor:not-allowed;
 background:seagreen;
 font-size:2em;
}
Run the Code

Icons on buttons

Icons on buttons look awesome. This is a great way to make fancy buttons which makes your button look attractive.

You can use Font Awesome Icons, Google fonts or any other custom fonts on your button.

Here, we are showing how you can include the font-awesome library to use the font-awesome icons. Similarly, you can include the Google fonts library to use Google fonts. You can download the custom font on your server as well.

Step 1: Provide the link of the font library. In the case of Font Awesome, we can include it like –

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

Step 2: Use the predefined class for the particular icon.
Example: The class to include Facebook Icon is – 

<i class="fa fa-facebook-official" aria-hidden="true"></i>
Button Icons

Example of Icons on buttons

<button><i class="fa fa-facebook-official" aria-hidden="true"></i></button>
<button><i class="fa fa-linkedin-square" aria-hidden="true"></i></button>
<button><i class="fa fa-twitter-square" aria-hidden="true"></i></button>
Run the Code

Buttons Hover Effects

Let us see how we can style the buttons when we mouse over it.

Example of Buttons Hover Effects

.btn-hoverval:hover {
  background:orange;
  box-shadow: 0 14px 8px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
Run the Code

Buttons on Image

Placing of buttons on Image is an Interesting topic.

The idea is that you can set the button with Image inside a div or you can also set it without a div.

The idea is that you need to have the position of image relative to the button.

If the button with Image is placed inside the div, then the div must be positioned as relative.

You can use top, bottom, left, right to set the distance of the button from the top, bottom, left and right sides respectively. These buttons can have a position as absolute as the image will be relative.

Buttons on Image

Example for buttons on Image using display and position

CSS
----
.img-container {
  display:inline-block;
  position:relative; 
}
.btn-bottom-left {
  position:absolute;
  bottom:0;
  border-radius:5px;
  background:orange;
}

HTML
----
<button type="button" style="cursor:pointer";><img src="editor_css/css_buttons_image.png" alt="Kids playing footbal" height="100px" width="200px"></button>
Run the Code

The transform(transformX,transformY) can move the button towards the image.

Example:

To move the button towards the left, we need to give a negative value of transformX.

Similarly, to move the button towards the negative ‘Y’ axis, we need to give a negative value of transformY.

Buttons on Image using position and transform

Example for buttons on Image using position and transform

.button-img {
  position: relative;
  max-width: 100%;
}

.buttonval {
  position: absolute;
  transform: translate(-60px, -30px);
  -ms-transform: translate(-60px, -30px); /* used by I.E and earlier versions */
  -moz-transform: translate(-60px, -30px); /* Mozilla Firefox and earlier */
  -webkit-transform: translate(-60px, -30px); /* used by safari and opera*/	  
  top: 50%;
  left: 50%;
  width: 150px;
  height: 40px;
  line-height:5px;
  background-color: green;
  font-size: 20px;
  padding: 22px;
  cursor: pointer;
  border-radius: 15px;
}
.buttonval:hover {
  opacity:0.5;
  background-color:red;
  color: rgba(80, 160, 300, 0.8);
}
Run the Code

Buttons Background Image

The background-image property can set the image of the background for the buttons.

buttons on background Image

Example of Buttons Background Image

CSS
----
#button-bgimg {
 padding:25px;
 cursor:pointer;
 background-image:url(img/newborn-child-tutorialbrain.jpg);
 background-size:150px;
 font-size:2em;
}

HTML
----
<button id="button-bgimg">Button</button>
Run the Code

Gradient Buttons

There is a beautiful concept of gradients using which you can apply smooth and even transitions for the Background of the button.

For transitions, you can use either Linear Gradients or Radial Gradients.

gradient Buttons

Example of Gradient Buttons

#button-grad {
 padding:25px;
 width:200px;
 cursor:pointer;
 background-image: linear-gradient(to top left,dodgerblue,lawngreen);
 font-size:2em;
}
Run the Code

Design Buttons using repeating linear gradients

Gradients is a vast topic and is an important one. Let us take another example using which we can style the buttons using repeating-linear-gradient.

Example of Designing Buttons using repeating-linear-gradients

.button {
  padding: 25px;
  font-size: 16px;
  cursor: pointer;
  font-size:2em;
  color:gold;
  background:repeating-linear-gradient(90deg,
  white,
  white 1px,
  black 2px,
  black 30px);
}  

.button:hover{
  background:repeating-linear-gradient(40deg,
  black,
  black 5px,
  white 4px,
  white 15px);
  opacity:0.6;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
Run the Code

Set Button Width

To define the fixed width of buttons, you can define the button using a class or id. Apply the width property of CSS on this class or id.

Alternatively, we can also apply inline-CSS directly on the button for the width property.

Button width

Example to set Button Width

button {
 padding:15px;
 cursor:pointer;
 color:white;
 background-image: linear-gradient(to top left,#773527,#3c1b14);
} 
	 
#btn1{
 width:150px;
}
	  
#btn2{
 width:250px;
}
	  
#btn3{
 width:10vw;
}
	  
#btn4{
 width:15em;
}
Run the Code

CSS Buttons Animations

Using the transition property, you can apply animations on the buttons.

Example:
You can inform the browser to change the style of the button on Image hover.

Example to Buttons Animations

.button-animation {
  padding:18px 40px;
  margin:4px;
  width: 200px;
  background:gold;
  transition: width 1s;
  cursor:pointer;
}
 
.button-animation:hover {
 background-image: linear-gradient(to top left,gold,white);
 width: 300px;
}
Run the Code

Button Ripple Effect

Button Ripple effect is like creating a series of waves in water. The ripple effect is getting popular nowadays. You can use the transition property to create a ripple effect once the user hovers over the button or clicks the button.

Example of Button Ripple Effect

.btn-ripple:hover {
 background: #33CBCC radial-gradient(circle, transparent 1%, #33CBCC 23%) center/1000
}

.btn-ripple {
 background-position: center;
 transition: background 1s;
}

.btn-ripple:active {
 background-color: black;
 transition: background 0.1s;
}
Run the Code

Responsive Buttons

The minimum size of the buttons must be 44px in width and 44px in height so that it is easily visible in smaller devices like mobile phones as well.

The maximum size can be controlled by setting the max-width to 100%.

Another way is to use a media query and apply the max-width for various sizes.

Example of Responsive Buttons

#button-res {
 padding:5px;
 margin:3px;
 cursor:pointer;
 font-size:1.5em;
}

@media all and (min-width:600px)
{
 #button-res 
 {
  padding:18px;
  max-width:100%;
  width:200px;
  min-width:50px;
  background-color:red;
 }
}
Run the Code

Menu Buttons

Menu items can be buttons as well. Let us see how.

Menu Buttons

Example of Menu Buttons

button {
  padding:15px;
  margin:1px;
  font-size:2em;
  cursor:pointer;
  background:black;
  display:inline-block;
 }
  
a { 
 text-decoration:none;
 color:Gold;
 width:100%;
 display:inline-block;
}
  
button:hover { 
 background:royalblue;
 color:black;
}

media all and (max-width:540px) {
  button {
   width:100%;
  }
}
Run the Code

Next and Prev Buttons

Some of the posts or pages have ‘Prev‘ and ‘Next‘ buttons so let us learn how to create it.

Example of Next and Prev Buttons

button {
 padding:15px;
 border-radius:12px;
 margin:1px;
 border:none;
 font-size:1.5em;
 cursor:pointer;
 background:#24890D;
 display:inline-block;
}
 
a { 
 text-decoration:none;
 color:Black;
 width:100%;
}

button:hover { 
 background:#66BA69;
 color:black;
}
 
i {
 color:white;
}
Run the Code

Download Button

Example of Next and Prev Buttons

<a href="img/girl-with-border.jpg" download>
<button>Download Image</button>
Run the Code
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!