How to apply background color to buttons using css in asp.net?

Question

I have an asp.net web form and I want to set the same background color to all the buttons in the form using CSS.This is what I have tried:

CSS:

body 
{
background-color:#336699;
}

.button 
{  
   background-color: #336699;   
   color: white;  
}

.button:hover 
{   
   background-color: White;
   color :#336699 
}

Page Source:

<head runat="server">
<title>Untitled Page</title>
<link href="../Layout.css" rel="stylesheet" type="text/css" />
</head>

Button Markup:

<asp:Button ID="btnSave" runat="server" Font-Bold="True" Height="40px" 
                            OnClick="btnSave_Click" Text="Save" 
Visible="False"     Width="90px" />

The background color for the body is applied successfully,but for buttons this code is not working.Please let me know how to do this.

The button doesn't seem to have the "button" class applied? Try adding CssClass="button" to the <asp:Button> tag? — xec
– xec, Commented Jun 13, 2014 at 13:03

Andrei · Accepted Answer · 2014-06-13 13:05:04Z

2

Note how your stylesheet declares styles. This:

body

is a set of styles to be applied to a tag body. However this:

.button
.button:hover

is a class, it will be applied only to those elements which have this class declared. SO you need to make sure the button has this class:

<asp:Button ... CssClass="button"

answered Jun 13, 2014 at 13:05

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehmet Eren Yener · Accepted Answer · 2014-06-13 13:18:52Z

1

Add Css Class selector to your button

<asp:Button CssClass="buttonClass" ID="btnSave" runat="server" Font-Bold="True" Height="40px"                                 OnClick="btnSave_Click" Text="Save" Visible="False" Width="90px"  />

then add design your class in your style

.buttonClass
{
   background-color:red;
}

edited Jun 13, 2014 at 13:18

answered Jun 13, 2014 at 13:13

Mehmet Eren Yener

2,0362 gold badges24 silver badges38 bronze badges

Comments

Ullas · Accepted Answer · 2014-06-13 13:22:36Z

-1

here might be a fix to <input type="button" class="button"> - but if there is, I don't know it.

.button 
{
   background-color: #E3E1B8; 
   padding: 2px 4px;
   font: 13px sans-serif;
   text-decoration: none;
   border: 1px solid #000;
   border-color: #aaa #444 #444 #aaa;
   color: #000
}

edited Jun 13, 2014 at 13:22

Ullas

11.6k5 gold badges36 silver badges52 bronze badges

answered Jun 13, 2014 at 13:18

Hitendra Patel

1235 bronze badges

Collectives™ on Stack Overflow

How to apply background color to buttons using css in asp.net?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related