How to create a button with stitched border using HTML and CSS? Last Updated : 29 Jul, 2020 Comments Improve Suggest changes Like Article Like Report 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. html <!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. html <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. html <!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: Comment More infoAdvertise with us L lakshgoel204 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to create a shinny button using HTML and CSS ? Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read How to create a animated pill shaped button using HTML and CSS ? Most mobile applications and websites have some eye-catching animation that tries to grab the attention of the user, these animations trigger some event fire or on an infinite loop, website events are triggered on mouse clicks or mouse hovers while on mobile touch events or infinite loop is activate 4 min read How to create and style border using CSS ? The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val 4 min read How to create waves on button with CSS and HTML? The wave effect on a button is a type of effect in which the shape of the button turns into a wave on hovering. While there are other ways to create a wave effect, a simple method is to use the keyframe property. Approach: In order to animate the button, we use keyframe to gradually set the transiti 2 min read Create a Button Group using HTML and CSS This article will show you how to create a Button Group with the help of HTML and CSS. To create the Button Group, first, we create buttons using the HTML <button> element and then apply some CSS styles to make all buttons in a group. First, we create a div container with the class name .butto 2 min read How to Create an Effect to Change Button Color using HTML and CSS ? The color-changing effect of a button is very common but what we are going to do a slightly advanced version of this effect. The background will change like a clip effect rotating at some particular angle. Approach: The approach is to provide two or three background and then rotating them on differe 3 min read Like