How To Create Stitched Look in CSS

The current trend in web design is textures with vintage design. One of the main aspects of this design is the use of stitches in your design, this used to have to be done using an image but thanks to CSS3 and some inventive use of these features you can create a stitched look just by using CSS. In this tutorial you will learn how you use CSS it create the stitched look on buttons for your site.

The HTML

The html for this is really simple we are just going to use a link.

<a href="#" class="stitched">CSS Stitched Look</a>

The CSS

As we are using a link for the HTML we need the CSS to do all the work. First we start off by creating the button the important part to create a stitched look will come later, make sure you copy the following CSS first to create the button.

.stitched {
   padding: 5px 10px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #ddd;
   border-radius: 3px;
   -moz-border-radius 3px;
   -webkit-border-radius: 3px;
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}

You will notice that the border is set to dashed which will make the border look stitched but the problem with this is that the border is on the outside of the link and it's not the look that we want to create. As we want the stitches to be inside the button, for this we need to use a neat trick with the box-shadow CSS property. Add the following to the stitched CSS class.

   -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);

The box shadow property allows you to add multiple shadows to your element just by separating them with a comma. The above CSS will add 2 shadows to the button, the first one will just add a shadow around all of the button with the same colour as the background. This first shadow is the thing that allows us to have the border inside of the button and creates the final stitched effect. The second shadow is simply a drop shadow used on the button. That's all it takes to create the stitched look in CSS just by using border dashed and neat trick with box-shadow.