We have Made multicolor Button using css in webpage. Following css and html code use.
Css Code
.buttonnewlink{height:auto; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; padding:8px;*padding:5px; display:inline; overflow:hidden; background-image:-moz-linear-gradient(0% 22px 90deg, #de9e0a, #9f2222); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#de9e0a), to(#9f2222)); background-color:#de9e0a; float:right; margin:-20px 27px 0 0px;}
.buttonnewlink a{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:16px; color:#fff; font-weight:bold; text-decoration:none;}
.buttonnewlink a:hover{text-decoration:none; color:black;}
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div class="buttonnewlink"><a href="#">Booking Now</a></div>
</BODY>
</HTML>
Output
Css Code
.buttonnewlink{height:auto; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; padding:8px;*padding:5px; display:inline; overflow:hidden; background-image:-moz-linear-gradient(0% 22px 90deg, #de9e0a, #9f2222); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#de9e0a), to(#9f2222)); background-color:#de9e0a; float:right; margin:-20px 27px 0 0px;}
.buttonnewlink a{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:16px; color:#fff; font-weight:bold; text-decoration:none;}
.buttonnewlink a:hover{text-decoration:none; color:black;}
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div class="buttonnewlink"><a href="#">Booking Now</a></div>
</BODY>
</HTML>
Output
No comments:
Post a Comment