Introduction to CSS Button Border
In this article, we are discussing button borders in CSS. In general, a button is a clickable event that is used in elements for which when we click on the button it will take to another page or element or some other action to be performed. In this article, let us see how the borders are applied to the buttons. The border property is used to provide the borders to the buttons for which we use border-radius property is used for styling button borders for rounding the corners of the buttons. We can also provide give double stroke by adding another border property on the inner span element by reducing the border-radius property.
Working of CSS Button Border
The borders are used for styling the button in CSS. In this article, we are discussing how to style the buttons using border-radius properties. In most cases, the borders aren’t used for styling buttons.
First, we have to create buttons using a button tag and this done as below. This button tag or property has different properties to style the buttons like color, border, text alignment, font size, etc. Let us see syntax and example.
Syntax:
<button type = “button” class = “button”> text or name of the button </button>
Examples of CSS Button Border
Here are the following examples mention below:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title> Educba Training </title>
</head>
<body>
<h1>The CSS button Element</h1>
<button type="button" onclick="alert('Hello Educba!')">Click Me!</button>
</body>
</html>
Output:
After clicking on the button
In the above program, we saw the simple creation of a button which will create a button named “click me” which after clicking the button it will pop up the message “Hello Educba”.
Let us see a general example of how borders can be declared while creating buttons.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title> Educba Training </title>
<style>
.button1 {
background-color: Blue;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
.button2 {
background-color: Blue;
border: dotted;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
.button3 {
background-color: Blue;
border: double;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
</style>
</head>
<body>
<h2>CSS Button property</h2>
<button class="button1">Button with no border styling </button>
<button class="button2">Button with dotted border styling</button>
<button class="button3">Button with double border styling</button>
</body>
</html>
4.5 (4,332 ratings)
View Course
Output:
In the above program, we can see that we have designed three buttons with border properties like the first button we have not applied any border property by specifying as “none”, the second button we have specified as “dotted” and the third button we have specified the border as “double”.
In a few examples, we also use the border-radius property for the buttons in CSS. This border-radius property is used for rounded corners of the button. Let us see an example of this and it’s working.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title> Educba Training </title>
<style>
.button1 {
background-color: red;
border: none;
border-radius: 5px;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
.button2 {
background-color: Blue;
border: dotted;
border-radius: 9px;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
.button3 {
background-color: green;
border: double;
border-radius: 9px;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
</style>
</head>
<body>
<h2>CSS Button property</h2>
<button class="button1">Button with no border styling </button>
<button class="button2">Button with dotted border styling</button>
<button class="button3">Button with double border styling</button>
</body>
</html>
Output:
In the above program, we can see we have specified all three buttons with button radius, the first button we have specified with “5px”, second and third button with button radius as “9px”.
We will see about dislodged borders that have effects like that is been detached from its border and this can be done using the below example. Let us see the below example.
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<title> Educba Training </title>
<style>
.dislodged-border {
background: #FB3FDE;
border-radius: 30px;
color: #fff;
display: inline-block;
font-family: sans-serif;
padding: 15px 20px 14px;
position: relative;
text-decoration: none;
}
.dislodged-border,
.dislodged-border:before {
border-radius: 30px;
box-sizing: border-box;
}
.dislodged-border:before {
border: 2px solid #FB3FDE;
content: "";
display: block;
height: 100%;
position: absolute;
width: 100%;
top: 5px;
left: 3px;
z-index: -1;
}
</style>
</head>
<body>
<h1>The CSS button Element</h1>
<button class="dislodged-border">Button</button>
</body>
</html>
Output:
In the above program, we see that we have the output where first the button background color has a pink color and it is like an inline-block button, and when we click on this button then we get dislodged button where we get a blue outline. In the above code, we specify the white color as font color, as we specify the display property as inline-block which makes inline element which gives the button a nice plum look, we specify padding which is used for text spacing, we have also specified position with value as “relative” which makes the absolute positioning of the element.
The dislodged border: before is specified which is used to apply to button itself and also consistent is also defined and also we have specified border-radius, box-sizing with border-box value because when we declare dislodged border styles we specify border-box as value to the box-sizing property.
Conclusion
In this article, we have concluded that the buttons are used for action events. These buttons can be declared by providing a name to the buttons along with different types of buttons like a radio button, a simple button, etc. These buttons can be designed by using different styling properties of CSS like border, color, background-color, font-size, padding, etc. In this article, we have discussed one such property that is applied to the buttons for styling which is borders. In general, borders to the buttons are usually not much preferable as simple buttons are more defined instead of bordered buttons. In this we have seen about border styling like solid, dotted, double, etc borders are applied. We have also seen about dislodged borders applied to buttons.
Recommended Articles
This is a guide to CSS Button Border. Here we discuss the working of CSS Button Border along with respective examples for better understanding. You may also look at the following articles to learn more –
