How to create a button with stitched border using HTML and CSS?
Last Updated :
29 Jul, 2020
We can provide a stitched border to a button using simple HTML and CSS, often when we create websites we want to make it look more attractive and therefore we can provide a stitched button to make our website look more creative. The below sections will guide you on how to create the desired button.
-
HTML Code: In this section we will create a basic button using the button class.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Stiched Button</title>
</head>
<body>
<button>Click me!</button>
</body>
</html>
|
-
CSS Code: In this section first we will design the button using basic CSS properties and then to create the stitched border we will use the CSS border property and set the border to dashed to provide the stitched look to our button.
<style>
body{
margin: 0;
padding: 0;
background: white;
}
/* styling the button */
button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px dashed black ;
box-shadow: 0 0 0 8px rgb(39, 170, 39);
background-color: rgb(39, 170, 39);
height: 50px;
width: 150px;
font-size: 1.5em;
border-radius: 10px;
}
</style>
|
Final Code: It is the combination of the above two code sections.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Stiched Button</title>
</head>
<style>
body{
margin: 0;
padding: 0;
background: white;
}
/* styling the button */
button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px dashed black ;
box-shadow: 0 0 0 8px rgb(39, 170, 39);
background-color: rgb(39, 170, 39);
height: 50px;
width: 150px;
font-size: 1.5em;
border-radius: 10px;
}
</style>
<body>
<button>Click me!</button>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...