I just wanted a bunch of Buttons with a Mouse-Over / Hover behavior.

July 22, 2010 | Comments | ASP.NET, CSS

I’m building a drop-in page library for administering ASP.NET Application Services (Membership, Roles, etc) on a public web site.

On the default.aspx page in my Admin folder I wanted a

I didn’t want a top menu, a fancy tree view, etc. using ASP.NET buttons. I’m using buttons because the click event can either be a navigation or an event handler in code behind.

Here is the look

In my /Admin folder I “cloned” the default Master.page (now /Admin/Admin.Master).

Next – I created an Admin.css file in the/Admin directory.

Code Snippet

.adminButton
{
    vertical-align: middle;
    text-align:center;
    width: 150px;
    height: 40px;
    border: 1;
    border-color: Silver;
    background-color: #465C71;
    color: White;
}
 
.adminButton:hover
{
    background-color: #BFCBD6;
}

In the Admin.Master page I added the Admin.css reference to the <head> element.

Code Snippet

<head id=”Head1″ runat=”server”>
    <title></title>
    <link href=”~/Styles/Site.css” rel=”stylesheet” type=”text/css” />
    <link href=”Admin.css” rel=”stylesheet” type=”text/css” />
    <asp:ContentPlaceHolder ID=”HeadContent” runat=”server”>
    </asp:ContentPlaceHolder>
</head>

Then I put the ASP.NET Buttons on my default page like this.

Code Snippet

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
    <div style=”text-align: center;”><h2>Administration</h2></div><hr /><br />
    <div style=”text-align: center;”>  
        &nbsp;&nbsp;  
        <asp:Button ID=”btnAdminUsers” runat=”server” Text=”List Users” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;  
        <asp:Button ID=”btnAdminActivate” runat=”server” Text=”Inactive Users” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
        <asp:Button ID=”btnAdminEvents” runat=”server” Text=”Locked Out Users” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;                      
        <br /><br />
        &nbsp;&nbsp;   
        <asp:Button ID=”btnAdminRoles” runat=”server” Text=”Roles” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
        <asp:Button ID=”btnAdminAccess” runat=”server” Text=”Access Security” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
        <asp:Button ID=”btnAdminSettings” runat=”server” Text=”Application Settings” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
        <asp:Button ID=”btnAdminReporting” runat=”server” Text=”Reporting” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
        <asp:Button ID=”btnAdminMisc” runat=”server” Text=”Misc” PostBackUrl=”" CssClass=”adminButton” />&nbsp;&nbsp;
    </div>
</asp:Content>

Simple !

Hopefully it will save someone some time.

Technorati Tags: ASP.NET,CSS,Buttons

Comments

There are 3 comments for this post.

Scott Koon on July 22, 2010 12:06 pm

Hey Joe,

You could also use CSS selectors instead of making a class.

div input:hover

{

background-color: #BFCBD6;

}

div input

{

vertical-align: middle;

text-align:center;

width: 150px;

height: 40px;

border: 1;

border-color: Silver;

background-color: #465C71;

color: White;

}

Then all of the buttons that are contained in a div tab will get that treatment. Or you could scope them to a specifc div if you need to by adding a class or id to the div.

#adminSection input

and

#adminSection input:hover

Then you don’t have to worry about adding the CssClass to new buttons you put on the page.
Joe Stagner on July 22, 2010 12:45 pm

Cool Scott – many thanks for sharing the technique !
Twitter Trackbacks for I just wanted a bunch of Buttons with a Mouse-Over / Hover behavior. : Misfit Geek [misfitgeek.com] on To on July 22, 2010 1:22 pm

RE: I just wanted a bunch of Buttons with a Mouse-Over / Hover behavior.

Pingback from Twitter Trackbacks for I just wanted a bunch of Buttons with a Mouse-Over / Hover behavior. : Misfit Geek [misfitgeek.com] on Topsy.com

Write a Comment

Let me know what you think?

Misfit Geek