how to make a button look like a hyperlink aspx.net - asp.net

I would like to use a button (that doe's more than just links) appear as hyperlink in aspx.net. meaning the button wont have the white background it normally has, and simply look like a highlighted text, like a link.
thanks in advance!

Give your button a CssClass
<asp:Button ID="button" Text="Button" CssClass="button" />
Then apply css for your button:
.button {
background-color:transparent;
border:none;
cursor:pointer;
text-decoration:underline;
padding: 0px;
}

You want an asp:LinkButtton control
W3 Schools:
http://www.w3schools.com/aspnet/control_linkbutton.asp
MSDN:
http://msdn.microsoft.com/en-gb/library/system.web.ui.webcontrols.linkbutton(v=vs.80).aspx

Related

Disable image button border

I'm using asp.net ImageButton and it looks like:
I want to remove that blue border.
I have tried
border: 0px;
border-style:none;
But same result.. How can I solve that?
I'm using that for voting system and I want to execute some server side code on this button click
Assuming that the border is NOT part of the image. This is what you can try:
border:none;
outline:none
append the !important declaration just in case there is some overriding your styles
Example
<asp:ImageButton ID="btnLike" runat="server" style="border:none !important;outline:none !important" .../>
Update based on comment
Since you are setting the image as a background image (dunnot why since you're already using an ImageButton) make sure that the background of your button has no color...background-color: transparent
If you are setting your image as a CSS background, this issue may solvable by setting the image via URL.
Create class like this and choose your image to show on button. include class in button. see below :
Css Style :
.btn {border:none; background:url(image/loader.gif); }
Your Button Code :
<input type="button" value="Submit" class="btn" />
try this , in CSS file
border: 0px solid transparent;
outline: transparent solid 0px;

Changing the style within the ASP.Net Menu Control

I've been having a problem with my menu control with the drop down menu with the background color staying white, when I want it to be yellow. I've tried changing some of the properties options so that the BackColor would be "yellow", but it still persists to be white. I've noticed that the menu color without hovering over any links is yellow, but the drop down menu is white. This is what I have in the control:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
BackColor="Yellow" EnableTheming="True" Orientation="Horizontal">
<StaticMenuStyle BackColor="Yellow" />
<StaticSelectedStyle BackColor="Yellow" />
<StaticMenuItemStyle BackColor="Yellow" />
<StaticHoverStyle BackColor="Yellow" />
</asp:Menu>
The control is using a static view, but changing those BackColors didn't help much either.
Also, is it possible to remove those "Arrow" images beside each link that has a drop down list? I figure it has something to do with the style properties, but I'm unsure.
Its been a long time, since the question has been asked, and I hope the asker would have got the answer by now. But I am adding one to it so as to help another guy out there.
Looking at the rendered html in Firebug, I assume the page lacks the CSS styles, neither internal nor inline. So, it is better that you add your own style for the menu.
You could try this (Add to internal or external style sheet linked with your aspx page):
/* #ctl00_Menu1 is the ID of my menu when rendered*/
#ctl00_Menu1 span
{
margin: 0 !important;
padding: 0 !important;
}
#ctl00_Menu1 span a
{
background: #1383dd;
color: #fff;
padding: 5px;
}
#ctl00_Menu1 span a:hover
{
background: #0065b6;
color: #fff;
}
hope it helps.

ASP.NET text box, set focus border color in external CSS file

I have an ASP.NET text box. I am trying to set the color of the border to green when the textbox gains focus, and I want to be specific about the class of the textbox. The text box looks like this -
<asp:TextBox CssClass="myInput" BorderStyle="None" runat="server">Search</asp:TextBox>
NOTE: I have BorderStyle="None" to start with, because when the textbox does not have focus, I want no border showing. Currently a border is shown on focusing, but it's not the color I want.
I have tried the following in my CSS file -
.myInput:focus {
border: green;
}
and
input.myInput:focus {
border: green;
}
(and a few others) but nothing has worked. Can someone please tell me how it can be done?
Thanks!
Yep, you need to remove the BorderStyle="None" from your TextBox control.
Set the border style for this in CSS, then you can use the focus
Have a look at this http://jsfiddle.net/xXEWK/
you can't see the textbox at first - click just to the right of where you see 'Textbox ->'
Have a look this
Instead of border: green you need to use border: 1px solid green;
And your text box should be like this
<asp:TextBox CssClass="myInput" runat="server">Search</asp:TextBox>
Update
I think then its better to use jQuery.
You can add a class on foucus and remove the class when out focus
See more about focus and focusOut
See this sample
I had to use -
.myInput:focus {
border:solid 1px green !important;
}
Because the border style was being overridden by other CSS settings.
you can use like this
<asp:TextBox ID="txtSearch" CSSClass="myInput" runat="server">Search</asp:TextBox>

Dotted border around ASP.NET Button

I have a problem with asp:button styling. I added following style:
.myAspButton {
background-image: url("image for button");
width: 110px;
height: 25px;
color: white;
font-weight: bold;
vertical-align: middle;
}
<asp:Button ID="btnAsp" runat="server" Text="hhh" CssClass="myAspButton" BackColor="Transparent" BorderStyle="None" />
Problem is when I press button it gets that dotted border around how to remove this?
And also what property to use to change button style when button is pressed down?
outline: 0;
This is the outline css property. You can set it just like border.
However, the outline property can be beneficial for people tabbing through controls to see which control currently has focus.
As for the second part of your question, this is not possible with CSS alone. You will need to implement some javascript to change the class on mouse down.
This is a little old, but none of these solutions worked for me in Firefox.
I now have a solution to this using Javascript. Just add onfocus="this.blur();" to your asp:Button tag...
<asp:Button ID="btnAsp" runat="server" Text="hhh" CssClass="myAspButton" BackColor="Transparent" BorderStyle="None" onfocus="this.blur();"/>
Have you tried adding this to the css style?
border: none;

ASP.net Server button mouseover effect

Look at the reply and contact buttons # http://forums.asp.net/t/1292579.aspx
how would I get that effect to my buttons (Dont need the icons, just the blue color, borders and a mouse over effect)
thanks,
Well those buttons are really just hyperlinks with spans inside them. You can achieve the same effect by using LinkButtons and CSS styling using the border style and the :hover pseudo class.
<asp:LinkButton id="link1" runat="server" CssClass="button" />
a.button
{
border: 2px solid white;
}
a.button:hover
{
border: 2px solid black;
}
You should give your buttons a CSS class then add CSS styling accordingly.
So if you have a button:
<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myCssClass" />
You would have the following script in your header:
<style type="text/css">
.myCssClass { // PUT YOUR CSS HEERE }
</style>

Resources