easily-make-css-button-for-your-site-

Easily make css button for your site

Hi everybody , how are you ? I am fine with blogging  . Today we make css button .Button is very important element of web page . But if you make button by image ,web page is loading slowly and ugly ! For that css button is very usefull for web page . oh don’t talk other subject . Now we make css button easily. There are many way to create css button but we make css button easily .

Demo Download Now

Firstly we make css code as below ……….

.btn {
	-moz-box-shadow:inset 1px 2px 9px -2px #bbdaf7;
	-webkit-box-shadow:inset 1px 2px 9px -2px #bbdaf7;
	box-shadow:inset 1px 2px 9px -2px #bbdaf7;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:17px;
	font-weight:bold;
	padding:6px 23px;
	text-decoration:none;
	text-shadow:1px 1px 0px #528ecc;
}.btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5;
}.btn:active {
	position:relative;
	top:1px;
}
/* Css Button TechFar.com*/


.btn2 {
	-moz-box-shadow:inset 1px 2px 9px -2px #f29c93;
	-webkit-box-shadow:inset 1px 2px 9px -2px #f29c93;
	box-shadow:inset 1px 2px 9px -2px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	color:#ffffff;
	font-family:Courier New;
	font-size:17px;
	font-weight:bold;
	padding:17px 23px;
	text-decoration:none;
	text-shadow:1px 1px 0px #b23e35;
}.btn2:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;
}.btn2:active {
	position:relative;
	top:1px;
}


.btn3 {
	-moz-box-shadow:inset 1px 2px 9px -2px #caefab;
	-webkit-box-shadow:inset 1px 2px 9px -2px #caefab;
	box-shadow:inset 1px 2px 9px -2px #caefab;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
	background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	color:#306108;
	font-family:Arial Black;
	font-size:17px;
	font-weight:bold;
	padding:17px 23px;
	text-decoration:none;
	text-shadow:1px 1px 0px #aade7c;
}.btn3:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
	background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
	background-color:#5cb811;
}.btn3:active {
	position:relative;
	top:1px;
}

/* Css Button TechFar.com*/
.btn4 {
	-moz-box-shadow:inset 1px 2px 9px -2px #ffffff;
	-webkit-box-shadow:inset 1px 2px 9px -2px #ffffff;
	box-shadow:inset 1px 2px 9px -2px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:Courier New;
	font-size:17px;
	font-weight:bold;
	padding:17px 23px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.btn4:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.btn4:active {
	position:relative;
	top:1px;
}
/* Css Button TechFar.com*/


Note:
Here color = button text color , background-color = button background color , -webkit-gradient = direction button color gradiant for chorome browser , -moz-linear-gradient = direction button color gradiant for Mozilla Firefox .

Copy this code and paste your site under head tag here . after that create anchor tag and set .btn class .look below …..

 Download Now 
 Download Now 
 Download Now 
 Download Now 

Test the button by visit page . I think You finished successfully . Now customize this code for you want .

Demo Download Now

Comments
  1. Sam

    This could not possibly have been more hlepufl!

    • I must show my appreciation to the wetirr for rescuing me from this particular scenario. Because of searching through the world wide web and finding solutions which were not productive, I thought my life was over. Living devoid of the solutions to the issues you have resolved through your main article content is a critical case, and the kind which could have negatively damaged my career if I hadn’t discovered your web site. Your own knowledge and kindness in maneuvering all things was vital. I’m not sure what I would’ve done if I had not encountered such a stuff like this. I am able to at this time look ahead to my future. Thanks a lot so much for your expert and amazing help. I will not think twice to refer the sites to anyone who should get guidance on this issue.

  2. Beckie

    Your post, make css button, is really well written and insightful. Glad I found your website, warm regards from Beckie!

  3. Thanks on your marvelous posting! I quite enjoyed reading it,
    you can be a great author.I will make sure to bookmark your blog and will come back
    from now on. I want to encourage continue your great writing, have a nice holiday
    weekend!

ADD YOUR COMMENT

*
CommentLuv badge
Close
Free Tutorial for you !
If you like this site , like and stay for new amazing tutorial !!

Twitter

Facebook

Google+