free hit counters
Pure CSS stylish Button

Pure CSS stylish Button

Apr 06





This is a custom pure CSS elegant button with perspective. It works cross-broswer but the whole style might be available only to modern broswers. I recommend you to use it as an action button rather than a link button (ex. submit for an email form).

Change background colors, grandients, font color or font-family to fit your needs. Just note that some of the CSS code is meant for cross-browser purposes, so be careful while modifing it.

I have created a background noise image for the surface of the button. It’s a transparent png image with just the noise on it which allows you to put it above any background color. You can find it here: http://i43.tinypic.com/2a5166u.png
With a darker website background color you should have a darker color for the button shadows as well (box-shadow properties).


HTML

The html is simple and clear, but don’t get too excited too soon…

1
2
3

<button class="button">
	<p>SUBMIT</p>				
</button>


CSS

Let’s have a look at the CSS code, starting with the styling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

/* ----------------- */
/* SETTING THE STYLE */
/* ----------------- */
 
.button{
 
	box-sizing:content-box;
 
	padding:0;
 
	margin:0;
 
	width:208px;
 
	height:64px;
 
	position:relative;
 
	display:block;
 
	background:none;
 
	border:none;
 
	outline:none;
}
 
/* 'before' pseudo-element for button perspective*/
.button:before{
 
	box-sizing:content-box;
 
	content: '';
 
	display: block;
 
	position: absolute;
 
	z-index:-2;
 
	top: 0;
 
	left: 0;
 
	width: 208px;
 
	height: 52px;
 
	background: #377fa3;
 
	border-radius: 6px 6px 12px 12px;
 
	box-shadow: 0px 5px 2px #d3d3d3;
 
	padding-bottom: 8px;
}
 
/* 'after' pseudo-element for button surface */
.button:after{
 
	box-sizing:content-box;
 
	content: '';
 
	position:absolute;
 
	z-index:-1;
 
	width:204px;
 
	height:52px;
 
	left:1px;
 
	top:1px;
 
	background:#4496c5;
 
	border-radius:5px;
 
	border:1px solid #61a1bf;
 
   /* fallback/image non-cover color */
   background-color: #63a7cc; 
 
   /* fallback image */
   background-image: url('http://i43.tinypic.com/2a5166u.png'); 
 
   /* Safari 4+, Chrome 1-9 */
   background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63a7cc), to(#3e89b2));
 
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-linear-gradient(top, #63a7cc, #3e89b2); 
 
   /* Firefox 3.6+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -moz-linear-gradient(top, #63a7cc, #3e89b2);
 
   /* IE 10+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -ms-linear-gradient(top, #63a7cc, #3e89b2);
 
   /* Opera 11.10+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -o-linear-gradient(top, #63a7cc, #3e89b2);
}
 
 
.button p{
 
	display:inline-block;
 
	padding-bottom:8px;
 
	font-weight: bold;
 
	font-size: 16px;
 
	color: white;
 
	font-family: 'Myriad Pro';
 
	letter-spacing: 1px;
 
	text-shadow: -1px -1px #494949;
}

Ok, that’s enought of styling.
Now let’s add some hover on and mouse down events.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

/* ------------------------- */
/* HOVER & MOUSE DOWN EVENTS */
/* ------------------------- */
 
.button:hover{cursor:pointer;}
 
.button:hover:before{background:#3883a5;}
 
.button:hover:after{
 
	/* Safari 4+, Chrome 1-9 */
	background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#70afd1), to(#428eb7));
 
	/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-linear-gradient(top, #70afd1, #428eb7); 
 
	/* Firefox 3.6+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -moz-linear-gradient(top, #70afd1, #428eb7);
 
	/* IE 10+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -ms-linear-gradient(top, #70afd1, #428eb7);
 
	/* Opera 11.10+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -o-linear-gradient(top, #70afd1, #428eb7);
}
 
/* You can use 'active' for a Mouse Down event */
.button:active:before{
 
	width: 196px;
 
	margin-top: 4px;
 
	left: 6px;
 
	padding-bottom: 4px;
 
	border-radius: 6px;
 
	box-shadow: 2px 2px 5px #bcbcbc, -2px -2px 5px #bcbcbc;
}
 
.button:active:after{
 
	width: 194px;
 
	height: 54px;
 
	top: 5px;
 
	left: 7px;
 
	border: none;
}
 
.button:active p{position:relative;top:4px;}


That’s it! We are done.
Leave a comment if you liked our custom css button maybe with a link to where you used it.

Posted by in Tutorials 3

3 comments

  1. Alberta
    Posted on April 21, 2012

    this is so beautiful i have to congratulate you for this.

    Reply
  2. E. Nim
    Posted on April 28, 2012

    Thank you very much Alberta.

    Reply
  3. Stew
    Posted on November 14, 2012

    really cool thanks for this tut!

    Reply

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">