Designing call to action buttons into web interfaces requires some forethought and planning; it has to be part of your prototyping and information architecture processes in order for them to work well. In this section, we’ll discuss some design techniques for call to action buttons.

here is the css code below to create a custom call to action button

<pre>.call-button{
color:#fff;
background-image: url("icons/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
padding:0 10px;
font-size: 22px;
text-decoration: none;
display:inline-block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
margin:3px 0;
line-height: 28px;
border-color: #e1e1e1;
background-color: #f8f8f8;
position: relative;
}

.call-button:hover{
background-position: 0 -4px;
opacity:0.9;
color:#fff;
text-decoration: none;
}

.call-button.dark , .call-button.dark:hover{
color:#444;
}
.call-button.large{
padding:0 10px 0px 10px;
font-size: 13px;
line-height: 33px;
}

.call-button.xl{
padding:0 18px 0px 18px;
font-size: 18px;
line-height: 42px;
}

.call-button span{
position: relative;
}

.call-button .call-info{ 	background: transparent url("icons/info.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}
.call-button .call-alert{	background: transparent url("icons/alert.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}
.call-button .call-tick{ background: transparent url("icons/tick.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}
.call-button .call-download{background: transparent url("icons/download.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}
.call-button .call-note{	background: transparent url("icons/note.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}
.call-button .call-error{	background: transparent url("icons/error.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}
.call-button .call-help{	background: transparent url("icons/help.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}

.call-button.red{background-color: #b00202; 	border-color: #b00202; }
.call-button.orange{background-color: #f6a240; 	border-color: #f6a240; }
.call-button.green{background-color: #52851b; 	border-color: #52851b; }
.call-button.aqua{background-color: #58c4be; 	border-color: #58c4be; }
.call-button.teal{background-color: #1d9f9f; 	border-color: #1d9f9f; }
.call-button.purple{background-color: #a258c4; 	border-color: #a258c4; }
.call-button.pink{background-color: #f346b0;	border-color: #f346b0; }
.call-button.silver{background-color: #d7d7d7; 	border-color: #d7d7d7; }
</pre>

View Demo

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/01/call-to-action-using-css1.pnghttp://w3lessons.info/wp-content/uploads/2012/01/call-to-action-using-css1-150x150.pngKarthikeyan KCSS3FreebiesWeb Designcall to action,CSS3
Designing call to action buttons into web interfaces requires some forethought and planning; it has to be part of your prototyping and information architecture processes in order for them to work well. In this section, we’ll discuss some design techniques for call to action buttons.here is the css code...