How to set css style to asp.net button?

Question

I have a asp:Button, I used css styles with cssClass property in asp:Button, but those styles are not working. When I use asp:LinkButton those styles are working well.I don't want any themes or skins for styles.

This is my asp page:

<asp:Button CssClass="smallButton" Text="Sign In" runat="server" ID="submit"></asp:Button>

This is my CSS:

.smallButton 
{
  //styles
}

When I change asp:Button to asp:LinkButton

<asp:LinkButton Text="Sign In" runat="server" ID="submit" CssClass="smallButton"></asp:LinkButton>

or

<span class="smallButton"><asp:LinkButton Text="Sign In" runat="server" ID="submit"></asp:LinkButton></span>

styles are working well. Only problem with the asp:Button control

please show us code. How do you expect us to guess what you did wrong ? — Steve B, Aug 29 '12 at 12:14
Can you provide the html that the asp.net button is generating. — Erwin, Aug 29 '12 at 12:23
Thanks everyone I found the solution and I add below that coding... — Sujanth, Sep 03 '12 at 04:35
This is old, but if someone runs into this, in my case, part of the css in the class didn't work for the button, so it ignored it ignored it. That solved it for me. — Steve, Nov 09 '17 at 14:53

score 17 · Answer 1 · answered Aug 29 '12 at 12:16

17

You can assign a class to your ASP.NET Button and then apply the desired style to it.

<asp:Button class="mybtn" Text="Button" runat="server"></asp:Button>

CSS:

.mybtn
{
   border:1px solid Red;
   //some more styles
}

answered Aug 29 '12 at 12:16

Priyank Patel

6,898
11
58
88

I am using the same way but this is not working for asp:Button control but this is working with asp:LinkButton and Image Button controls – Sujanth Aug 29 '12 at 16:51
@Sujanth Maybe you can try to clear the cache from the browser and try again.The code seems alright. – Priyank Patel Aug 30 '12 at 05:00
Careful with this. ASP.Net will overwrite the CSS field. For example if you set the button disabled the css class will be overwritten with "disabled". Use the provided setter CssClass so ASP.Net can coordinate when it sets the css classes. – Timothy Gonzalez Jul 25 '16 at 12:15

score 14 · Answer 2 · edited Jan 16 '18 at 14:40

14

You can use CssClass attribute and pass a value as a css class name

<asp:Button CssClass="button" Text="Submit" runat="server"></asp:Button>` 

.button
{
     //write more styles
}

edited Jan 16 '18 at 14:40

YakovL

7,557
12
62
102

answered Aug 29 '12 at 12:24

Shankar Gupta

159
5

1

This is the asp expected way – chingNotCHing Sep 24 '19 at 08:42

score 14 · Accepted Answer · answered Sep 03 '12 at 04:33

14

I Found the coding...

 input[type="submit"]
    {
     //css coding
    }
 input[type="submit"]:Hover  
    {
     //css coding
    }

This is the solution for my issue..... Thanks everyone for the valuable answers.......

answered Sep 03 '12 at 04:33

Sujanth

613
1
6
12

score 8 · Answer 4 · answered Mar 11 '15 at 18:52

8

nobody wants to go to the clutter of using a class, try this:

<asp:button Style="margin:0px" runat="server" />

Intellisense won't suggest it but it will get the job done without throwing errors, warnings, or messages. Don't forget the capital S in Style

answered Mar 11 '15 at 18:52

Stephen DuMont

1,574
1
11
5

4

Downvoted. Good luck doing maintenance / overhauls on that. With a class you will at least have a single point of change. – Spikee Apr 18 '18 at 07:31

score 2 · Answer 5 · edited Jan 25 '17 at 21:59

If you have a button in asp.net design page like "Default.asp" and you want to create CSS file and specified attributes for a button,labels or other controller. Then first of all create a css page

Right click on Project
Add new item
Select StyleSheet

now you have a css page now write these code in your css page(StyleSheet.css)

StyleSheet.css

.mybtnstyle
{
 border:1px solid Red;
 background-color:Red;
 border-style:groove;
 border-top:5px;
 outline-style:dotted;
}

Default.asp

{

  <head> 
  <title> testing.com </title>
 </head>
<body>
 <b>Using Razer<b/>
<form id="form1" runat="server">
 <link id="Link1" rel="stylesheet" runat="server" media="screen" href="Stylesheet1.css" />
 <asp:Button ID="mybtn" class="mybtn" runat="server" Width="339px"/>
 </form>
 </body>
</html>

}

score 1 · Answer 6 · answered Aug 29 '12 at 12:17

1

You could just style the input element in your css file. That is then independent of ASP.NET.

<form action="">
    Name: <input type="text" class="input" />
    Password: <input type="password" class="input" />
    <input type="submit" value="Submit" class="button" />
</form>
CSS
.input {
    border: 1px solid #006;
    background: #ffc;
}
.button {
    border: 1px solid #006;
    background: #9cf;
}

With the CssClass you can assign the "input" class to it.

answered Aug 29 '12 at 12:17

Remy

12,555
14
64
104

But then you aren't using server controls and we're not sure if that's what the user wants here. – Steve Aug 29 '12 at 13:16
It's basically what everybody else here suggested. – Remy Aug 29 '12 at 13:17
Everyone here used server controls in their examples. Not nitpicking, but asp.net utilizes server controls for a reason. Granted, you could have added a runat tag to these controls and voila. – Steve Aug 29 '12 at 13:29

score 0 · Answer 7 · answered Mar 19 '13 at 17:29

0

The answer you mentioned will be applied to all buttons. You should try this:

input[type="submit"].someclass {
    //somestyle}

And make sure you add this to your button:

CssClass="someclass"

answered Mar 19 '13 at 17:29

Nandolcs

393
4
11

score 0 · Answer 8 · answered Jul 04 '15 at 11:22

<asp:LinkButton ID="mybutton" Text="Link Button" runat="server"></asp:LinkButton>

With Hover effects :

 #mybutton
        {
            background-color: #000;
            color: #fff;
            font-size: 20px;
            width: 150px;
            font-weight: bold;
        }
        #mybutton:hover
        {
            background-color: #fff;
            color: #000;
        }

http://www.parallelcodes.com/asp-net-button-css/

score 0 · Answer 9 · answered Jan 14 '22 at 14:22

0

  <asp:Button CssClass="button" style="color:black" Text="Submit" runat="server"></asp:Button>`

answered Jan 14 '22 at 14:22

Mukhtar Ismail

1

Both the `CssClass` and `style` attributes are addressed by other answers already. – Jeremy Caney Jan 16 '22 at 00:58

How to set css style to asp.net button?

9 Answers9

Linked