Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.

    Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




    <!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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!