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.
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
- 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.
Example of Button Styling
The Syntax of Button On-Click:
Example of Button On-Click
The box-shadow property can easily create the shadow for the buttons.
Example of Button shadow
Example for Linking Buttons
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
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:
Example to disable buttons
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 –
Step 2: Use the predefined class for the particular icon.
Example: The class to include Facebook Icon is –
Example of Icons on buttons
Buttons Hover Effects
Let us see how we can style the buttons when we mouse over it.
Example of Buttons Hover Effects
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.
Example for buttons on Image using display and position
The transform(transformX,transformY) can move the button towards the image.
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.
Example for buttons on Image using position and transform
Buttons Background Image
The background-image property can set the image of the background for the buttons.
Example of Buttons Background Image
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.
Example of Gradient Buttons
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
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.
Example to set Button Width
CSS Buttons Animations
Using the transition property, you can apply animations on the buttons.
You can inform the browser to change the style of the button on Image hover.
Example to Buttons Animations
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
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
Menu items can be buttons as well. Let us see how.
Example of Menu Buttons
Next and Prev Buttons
Some of the posts or pages have ‘Prev‘ and ‘Next‘ buttons so let us learn how to create it.