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 Next Article How to create a button with stitched border using HTML and CSS? 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 Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 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 a Transparent Button using HTML and CSS? Transparent buttons are a popular design choice in modern web development, as they create a sleek and minimalist look. By using CSS, you can easily create buttons with fully transparent or semi-transparent backgrounds. This article uses the background-color: transparent; property to design the trans 2 min read Like