Creating Image Butttons using CSS


Creating Image Butttons using CSS


The following CSS sets the Background image of a HyperLink control:



a.mybutton
{
display: block;
float: left;
background-image: url('../Images/BabeDa1.gif');
background-repeat: no-repeat;
width: 133px;
height: 27px;
padding-top:5px;
text-align: center;
font-family:arial;
font-size:12px;
}



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HyperLink ID="LnkProfile" runat="server" CssClass="mybutton" Font-Bold="True"
Font-Names="Verdana" Font-Size="10pt" ForeColor="Maroon" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
</div>
</form>
</body>
</html>



Please check the attached document...


Thanks & Regards
Paritosh Mohapatra


Attachments

  • CSS Image Buttons (37605-81439-RoundedButtons.zip)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: