Create 8 Simple CSS Image Button With Box Shadows Effects

Share:

Create 8 Simple CSS Images Button with Box Shadow Effect. In this post, we will discuss how to create a simple image button with CSS to make the image button look more beautiful. In this discussion we will use the box shadow effect. More details, read tutorial to create simple CSS image button below …
Create 8 Simple CSS Image Button Box Shadow Effect

Tutorial : Create Simple CSS Image Button with Box Shadow Effect

1. Create a Hyperlink

To show button in text link, it will be easier and simple when the button css using class tag. So, if you want to display the image button on a link, we just add the class tag in it. For example:

<a href="" class="button">CSS Images Button Script</a>

2. Create a Image Button with CSS

In create a image button, we will require the CSS code to call an image appear in the button, coloring button box and give shadow effect on button box. More complete, this is the CSS code to create image button with box shadow effect.

.button{
color: #fff;
text-decoration: none;
font-weight: 900;
border:1 px solid;
border-color: button-colorcode;
margin: 2px;
width: 50px;
padding: 3px 10px 3px 25px;
font: 100% 'trebuchet ms',helvetica,sans-serif;
background: button-colorhtml url(URL-images) 5px no-repeat;
box-shadow: 5px 5px 5px shadow-colorcode;
}

Create 8 Simple CSS Image Button with Box Shadow Effect

Only use the CSS script above, you can create different shapes of unique CSS image buttons. To create a button that is different, do replace the URL-images with the image you want. Change the color of the button you want in the button-colorcode and change the color of the box shadow on the shadow-colorcode.
From our experiments, this is example from 8 simple CSS images button with box shadow effect :
Create 8 Simple CSS Image Button Box Shadow Effect
And this is the CSS and HTML script to create 8 simple CSS Image button with box shadow effect above ..

<html>
<head>
<title> Create 8 Simple Button with CSS Image Box Shadow Effect | Tutorial.World.Edu </title>
<style>
.button1{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#64a72c;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#64a72c url(http://3.bp.blogspot.com/-Ss6s2DXiJz0/UYdDmB7u2yI/AAAAAAAAAX4/99vX4MwySyY/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+Buy.png) 5px no-repeat;
box-shadow: 5px 5px 5px #8ad14f;
}
.button2{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#cb3bc5;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#cb3bc5 url(http://3.bp.blogspot.com/-04kzgrXy0M4/UYdB-1b7PQI/AAAAAAAAAW8/3JN-BJwcfNs/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+edit.png) 5px no-repeat;
box-shadow: 5px 5px 5px #db77d7;
}
.button3{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#4fcbd0;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#4fcbd0 url(http://3.bp.blogspot.com/-kh9i_1JYHf8/UYdCCHbPDFI/AAAAAAAAAXE/4YpX8gVt0Bo/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+delete.png) 5px no-repeat;
box-shadow: 5px 5px 5px #8bdde0;
}
.button4{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#d0a148;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#d0a148 url(http://1.bp.blogspot.com/-nFAyHdo01FY/UYdCFEKBmiI/AAAAAAAAAXM/Ia5gGpV--TM/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+email.png) 5px no-repeat;
box-shadow: 5px 5px 5px #e0c085;
}
.button5{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#4f8bd0;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#4f8bd0 url(http://4.bp.blogspot.com/-qDxXhha6_Xk/UYdCIPhPKJI/AAAAAAAAAXU/WRycW3_zlOM/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+download.png) 5px no-repeat;
box-shadow: 5px 5px 5px #8bb3e0;
}
.button6{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#a3a62c;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#a3a62c url(http://4.bp.blogspot.com/-UqA51klLqBE/UYdCLsb1-ZI/AAAAAAAAAXc/B62aEe2xYH8/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+login.png) 5px no-repeat;
box-shadow: 5px 5px 5px #cdd04f;
}
.button7{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#ca4b34;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#ca4b34 url(http://3.bp.blogspot.com/-XNOI_g8O4Hc/UYdCOyiO8JI/AAAAAAAAAXk/UkERxNPqKOU/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+Publisher.png) 5px no-repeat;
box-shadow: 5px 5px 5px #da8170;
}
.button8{
color:#fff;
text-decoration: none;
font-weight:900;
border:1px solid;
border-color:#7a62da;
margin:2px;
width:50px;
padding:3px 10px 3px 25px;
font:100% 'trebuchet ms',helvetica,sans-serif;
background:#7a62da url(http://4.bp.blogspot.com/-Bt-VdTD7-Eo/UYdCRYmKONI/AAAAAAAAAXs/GFMjFwC2uCw/s1600/Create+Simple+CSS+Image+Button+with+Box+Shadow+Effect+-+Searches.png) 5px no-repeat;
box-shadow: 5px 5px 5px #aea0e9;
}
</style>
</head>
<body>
<a href="#" class="button1">Buy Now!</a>
<a href="#" class="button2">Edit Now!</a>
<a href="#" class="button3">Delete Now!</a>
<a href="#" class="button4">Email Us!</a>
<br/><br/>
<a href="#" class="button5">Download</a>
<a href="#" class="button6">Login Now!</a>
<a href="#" class="button7">Publish Now!</a>
<a href="#" class="button8">Search!</a>
</body>
</html>

Not complicated to create a simple image button like this. Have you practiced, I am sure will be success.

Hopefully this tutorial can be very useful for you
Thank you for taking the time to read the Tutorial : Create 8 Simple CSS Image Button with Box Shadow Effect

[Tutorial.World.Edu]

3 thoughts on “Create 8 Simple CSS Image Button With Box Shadows Effects

  1. Pingback: How To Create Simple Login / Sign Up Form Using CSS And HTML | Online Website Design Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *