Skip to content
Related Articles

Related Articles

How to create a button with stitched border using HTML and CSS?

Improve Article
Save Article
  • Last Updated : 29 Jul, 2020
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!