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
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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
}
Method 2
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…….
Method 3
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
}
Method 4
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
Method 5
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" rel="nofollow noreferrer noopener" /> <asp:Button ID="mybtn" class="mybtn" runat="server" Width="339px"/> </form> </body> </html>
}
Method 6
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.
Method 7
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"
Method 8
<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/
Method 9
<asp:Button CssClass="button" style="color:black" Text="Submit" runat="server"></asp:Button>`
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0