<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Web2CssButtonStyle.aspx.cs" Inherits="Web2CssButtonStyle" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.div-overlay-btn {float: left;clear: both;background: url(images/btn-left.png) no-repeat;padding: 0 0 0 10px;margin: 5px 0;}
.div-overlay-btn a{float: left;height: 40px;background: url(images/btn-center.png) repeat-x left top;line-height: 40px;padding: 0 10px;color: #fff;font-size: 1em;text-decoration: none;}
.div-overlay-btn span {background: url(images/btn-right.png) no-repeat;float: left;width: 10px;height: 40px;}
.btn-overlay-red{background-color:red}
.btn-overlay-blue{background-color:blue}
.btn-overlay-green{background-color:green}
.btn-overlay-yellow{background-color:yellow}
.btn-overlay-black{background-color:black}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>Color adjustable CSS Buttons</h1>
<div class="div-overlay-btn btn-overlay-red"><a href="#">Red</a><span></span></div>
<br /><div class="div-overlay-btn btn-overlay-blue"><a href="#">Blue</a><span></span></div>
<br /><div class="div-overlay-btn btn-overlay-green"><a href="#">Green</a><span></span></div>
<br /><div class="div-overlay-btn btn-overlay-yellow"><a href="#">Yellow</a><span></span></div>
<br /><div class="div-overlay-btn btn-overlay-black"><a href="#">Black</a><span></span></div>
</form>
</body>
</html>
The images used are
Click here to find more colors.
No comments:
Post a Comment