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
– Steve B, Commented Aug 29, 2012 at 12:14
Can you provide the html that the asp.net button is generating. — Erwin
– Erwin, Commented Aug 29, 2012 at 12:23
Thanks everyone I found the solution and I add below that coding... — Sujanth
– Sujanth, Commented Sep 3, 2012 at 4: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
– Steve, Commented Nov 9, 2017 at 14:53

Priyank Patel · Accepted Answer · 2012-08-29 12:16:35Z

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, 2012 at 12:16

Priyank Patel

7,01611 gold badges62 silver badges88 bronze badges

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

3 Comments

Sujanth Over a year ago

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

Priyank Patel Over a year ago

@Sujanth Maybe you can try to clear the cache from the browser and try again.The code seems alright.

Timothy Gonzalez Over a year ago

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.

Sujanth · Accepted Answer · 2012-09-03 04:33:40Z

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 3, 2012 at 4:33

Sujanth

6311 gold badge6 silver badges12 bronze badges

Comments

YakovL · Accepted Answer · 2018-01-16 14:40:41Z

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, 2018 at 14:40

YakovL

8,44813 gold badges74 silver badges117 bronze badges

answered Aug 29, 2012 at 12:24

Shankar Gupta

1595 bronze badges

1 Comment

chingNotCHing Over a year ago

This is the asp expected way

Stephen DuMont · Accepted Answer · 2015-03-11 18:52:46Z

11

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, 2015 at 18:52

Stephen DuMont

1,7111 gold badge12 silver badges6 bronze badges

1 Comment

kbd Over a year ago

Downvoted. Good luck doing maintenance / overhauls on that. With a class you will at least have a single point of change.

Kamran · Accepted Answer · 2017-01-25 21:59:34Z

2

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>

}

edited Jan 25, 2017 at 21:59

Kamran

1813 silver badges13 bronze badges

answered Feb 11, 2014 at 6:06

Pir Fahim Shah

10.6k1 gold badge84 silver badges81 bronze badges

Comments

Remy · Accepted Answer · 2012-08-29 12:17:36Z

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, 2012 at 12:17

Remy

12.8k14 gold badges66 silver badges106 bronze badges

3 Comments

Steve Over a year ago

But then you aren't using server controls and we're not sure if that's what the user wants here.

Remy Over a year ago

It's basically what everybody else here suggested.

Steve Over a year ago

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.

Nandolcs · Accepted Answer · 2013-03-19 17:29:07Z

1

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, 2013 at 17:29

Nandolcs

4015 silver badges11 bronze badges

Comments

hitesh vikani · Accepted Answer · 2015-07-04 11:22:45Z

0

<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/

answered Jul 4, 2015 at 11:22

hitesh vikani

534 bronze badges

Comments

Mukhtar Ismail · Accepted Answer · 2022-01-14 14:22:14Z

0

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

answered Jan 14, 2022 at 14:22

Mukhtar Ismail

1

1 Comment

Jeremy Caney Over a year ago

Both the CssClass and style attributes are addressed by other answers already.

Collectives™ on Stack Overflow

How to set css style to asp.net button?

9 Answers 9

3 Comments

Comments

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

Comments

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related