Mouse over effect

This is so simple and can found thousand places but I tried to make it more easier who doesnt know the different between <asp:linked button> or anchor.

Copy below code in your ASPX page.
 

 <table width=”50%” border=”1″ cellspacing=”0″ cellpadding=”0″>

<tr>
<td align=”center” class=”topmenulink”>
<a href=”<%=ResolveURL(“~/Default.aspx”) %> class=”topmenulink”>Home</a></td>
<td align=”center” class=”topmenulink”>
<a href=”http://blog.joggee.com/?page_id=11″ class=”topmenulink”>About Us</a></td>
<td align=”center” class=”topmenulink”>
<a href=”http://blog.joggee.com” class=”topmenulink”>Blog</a></td>
<td align=”center” class=”topmenulink”>
<a href=”http://www.joggee.com” class=”topmenulink”>Contact Us</a></td>
</tr>
</table>
create a CSS (Style sheet)

 copy below code in your CSS

.topmenulink

{
font-family: tahoma;
font-size: 13px;
font-weight: normal;
color:Blue;
text-decoration: none;
}
.topmenulink:hover
{
font-family: tahoma;
font-size: 13px;
font-weight: normal;
color: Blue;
text-decoration: none;
background-color: Khaki;
}

Note: you can change color scheme as per your site theme.

YOU CAN DOWNLOAD SAMPLE PROJECT HERE

I have used above ResolveURL Method,Just to give hint if you are using MASTER Page, then its recommendable to use ResolveURL to avoid any Warning or Problem.

If you want to how the hyperlink on the complete Button instead of TEXT then bring anchor link tag outside <TD> tag

<table width=”50%” border=”1″ cellspacing=”0″ cellpadding=”0″>

<tr>
<a href=”<%=ResolveURL(“~/Default.aspx”) %> class=”topmenulink”>Home

<td align=”center” class=”topmenulink”>

</td></a>

</tr>
</table>

Enjoy

Joggee

ASP.NET Tips ,

2 responses to Mouse over effect


  1. Thanks for the post. Poznovatelno.

  2. Payal

    Thanks for keeping it here, i needed it… :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>