Exploring new styles of CSS Buttons is always a fun. One of my earlier tutorial discussed a method of Creating Round Social Media Icons using CSS without any images. This time I have come up with leather style buttons with stitches running around the edges of the button.
If you are new to CSS Buttons, here is a Step-by-Step Tutorial to Create CSS Buttons for newbies. I strongly recommend you to go through it before reading this post as it will give you good idea of using CSS over images for buttons.
OK. Now coming back to leather style buttons, I want these buttons to look like natural leather so I've used various shades of tan for button background. Next I've used CSS border property with dashed style to bring the stitches.
There is one problem here, as the stitches are at the very edge of the button. I want to push them little bit inside so that there will be a gap between the edges and the stitch to make them look real. CSS box-shadow property comes to the rescue and I've added some spread-radius of the same color as button background.
Also I've added some hover effects to spice up the button looks. Here is the complete code for the leather buttons.
CSS Code
/*general styles for buttons*/
.generalBtn {
margin: 10px;
padding: 10px 15px;
display: inline-block;
cursor:pointer;
color:#1c1c1c;
font: bold 16px arial;
text-align: center;
text-decoration: none;
border: 2px dashed #101010;
border-radius:0 6px;
-moz-border-radius:0 6px;
-webkit-border-radius:0 6px;
-o-border-radius:0 6px;
}
.generalBtn:hover
{
text-decoration: none;
border-radius:6px 0;
-moz-border-radius:6px 0;
-webkit-border-radius:6px 0;
transition: .2s ease-in; /*animation effect*/
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
}
.chamoiseeBtn
{
background-color: #A0785A;
text-shadow:0px 1px 1px #BC9D90;
box-shadow: 0 0 0 5px #A0785A,
1px 1px 4px 6px #7F7F7F;
-moz-box-shadow: 0 0 0 5px #A0785A,
1px 1px 4px 6px #7F7F7F;
-webkit-box-shadow: 0 0 0 5px #A0785A,
1px 1px 4px 6px #7F7F7F;
-o-box-shadow: 0 0 0 5px #A0785A,
1px 1px 4px 6px #7F7F7F;
}
.burlywoodBtn
{
background: #DEB887;
text-shadow: 0px 1px 1px #FADDBD;
box-shadow: 0 0 0 5px #DEB887,
1px 1px 4px 6px #7F7F7F;
-moz-box-shadow: 0 0 0 5px #DEB887,
1px 1px 4px 6px #7F7F7F;
-webkit-box-shadow: 0 0 0 5px #DEB887,
1px 1px 4px 6px #7F7F7F;
-o-box-shadow: 0 0 0 5px #DEB887,
1px 1px 4px 6px #7F7F7F;
}
.boneBtn
{
background-color: #E3DAC9;
text-shadow: 0px 1px 1px #FFF;
box-shadow: 0 0 0 5px #E3DAC9,
1px 1px 4px 6px #7F7F7F;
-moz-box-shadow: 0 0 0 5px #E3DAC9,
1px 1px 4px 6px #7F7F7F;
-webkit-box-shadow: 0 0 0 5px #E3DAC9,
1px 1px 4px 6px #7F7F7F;
-o-box-shadow: 0 0 0 5px #E3DAC9,
1px 1px 4px 6px #7F7F7F;
}
.copperBtn
{
background-color: #B87333;
text-shadow: 0px 1px 1px #D49869;
box-shadow: 0 0 0 5px #B87333,
1px 1px 4px 6px #7F7F7F;
-moz-box-shadow: 0 0 0 5px #B87333,
1px 1px 4px 6px #7F7F7F;
-webkit-box-shadow: 0 0 0 5px #B87333,
1px 1px 4px 6px #7F7F7F;
-o-box-shadow: 0 0 0 5px #B87333,
1px 1px 4px 6px #7F7F7F;
}
HTML Markup
<a href="#" class="chamoiseeBtn generalBtn">Click Here</a> <a href="#" class="burlywoodBtn generalBtn">Click Here</a> <a href="#" class="boneBtn generalBtn">Click Here</a> <a href="#" class="copperBtn generalBtn">Click Here</a>
Demo
Please roll mouse over the buttons to see the hover effect.
You can see how a few lines of CSS Code have turned up the plain anchor link into a stylish button. Do you have any problem implementing these CSS Buttons or suggestion for improvement? Please let me know your voice through comments.
No comments:
Post a Comment