I have a button like so:
<button>Click Me</button>
I want to make that button linked with an href. Is it compliant HTML to wrap the button in a tag or to put the tag inside of the button to make it linkable?
Thanks
You may just want to use a link itself and style it like a button. You can still add an onclick, but it makes linking to a new page really easy.
a.button{
color: #000000;
text-decoration: none;
display: block;
background: #FFFFFF;
border: solid 1px black;
}
A less appealing (though commonly used) method is to wrap a link around an image.
<img src="/images/button.png"/>
I think the correct way would be to put the button in a form, and set the form's action attribute to the page you want to link to and the button's type attribute to submit.
e.g.
<form action="nextpage.html" method="get">
<button type="submit"> Next </button>
</form>
Related
In my form I have a submit button:
<button name ="sort" value="sort" type="submit">▼</button>
The button looks like a "button". This is not what I want, I would simply like the button look like this:
▼
So this means without any style, only the black arrow. Is this possible?
Yes, you can just use CSS to remove the background and border
button {
background: none;
border: none;
}
<button name ="sort" value="sort" type="submit">▼</button>
<button name ="sort" value="sort" type="submit" style="background-color:transparent;border:0">▼</button>
The only properties of the button which are visible are background and border. So you have to set these properties to nothing like the following code:
button {
background:none;
border:0;
}
<button name ="sort" value="sort" type="submit">▼</button>
Hint: If you want to define the rule only for this button you have to replace button with button[name="sort"] or set a class.
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;
I want text instead of the button that is provided in rails.
I've added a class to the submit button, but this is where I'm stuck. Normally in CSS if I want something to be text I just don't style it. But in this case, the button is styled automatically to look like a button.
How do I overide this and make it look like just text?
Here's your button with a class of no_style (or whatever you would like):
<button class="no_style">test</button>
Then in your stylesheet call the button with a class of no_style:
button.no_style {
background: none;
border: none;
}
You may need to inspect the button to see if there is any other styling on it. You can inspect it by right clicking on the button and select "inspect element". If your button has any other styles, I can help you remove them. Just let me know if anything else shows up and I can show you how to remove it.
If you want to change the text you can still style the text without the look of a button, like this:
button.no_style {
background: none;
border: none;
color: red;
font-size: 24px;
text-transform: uppercase;
}
Is this what you were looking for?
Wondering if there is a way to have multicolor text for ASP.NET Button Text.
Or what is the best way to have multi-styled text e.g. bold, red-color + normal black color text for ASP.NET button?
One way I know is creating an Image and use ImageButton, which I plan to do if I don't find any other better way.
Any other ways?
Updated:
Why need??
1: The button has little informative message and part of the text needs to be differnt for emphasizing.
2: Not my choice.
One way I figured out: is using a LinkButton. I'll post my solution once ready.
I believe the XHTML schema allows you to do:
<button><span>Hello</span> <span>World</span></button>
Which you can style accordingly with CSS.
.button span { color: red; }
.button span:first-child { color: blue; }
For an ASP.NET button, you could probably write the someting similar, but realistically it is not a great UX recommendation. If you can keep to a consistent UI, or try to follow the UI guidelines outlined by the parent OS, the user will be more familiar and comfortable.
Here's my solution:
.btndiv
{
border-style: outset;
background-color: Lime;
color: Black;
width: 200px;
height: 50px;
text-align: center;
}
.btndiv a
{
text-decoration: none;
color: black;
}
<p class="btndiv">
<asp:Linkbutton id="LinkButton1" runat="server">
<span style="color:Red;font-weight:bold">Welcome Back! </span><br />
<span> Click to Enter the site.</span>
</asp:Linkbutton>
</p>
Have you considered using an <a> tag instead of a button,
and then calling any function on the click event of the tag?
Particletree (written by the guys behind Wufoo forms) has an
informative article about styling buttons.
http://particletree.com/features/rediscovering-the-button-element/
Are you sure you want button text with multiple styles?
Do you have examples of a well-designed button that has
multiple text styles? (I ask because I don't recall ever seeing one...)
For reference:
Apple Mac UX guidelines and buttons:
http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/XHIGControls/XHIGControls.html#//apple_ref/doc/uid/TP30000359-TPXREF186
Windows Vista UX guidelines and command buttons:
http://msdn.microsoft.com/en-us/library/aa511453.aspx
I want to change the standard "3D" look of the standard asp.net checkbox to say solid 1px. If I try to apply the styling to the Border for example it does just that - draws the standard checkbox with a border around it - which is valid I guess.
Anyway, is there a way to change how the actual textbox is styled?
Rather than use some non-standard control, what you should be doing is using un-obtrusive javascript to do it after the fact. See http://code.google.com/p/jquery-checkbox/ for an example.
Using the standard ASP checkbox simplifies writing the code. You don't have to write your own user control, and all your existing code/pages don't have to be updated.
More importantly, it is a standard HTML control that all browsers can recognize. It is accessible to all users, and work if they don't have javascript. For example, screen readers for the blind will be able to understand it as a checkbox control, and not just an image with a link.
I think the best way to make CheckBox looks really different is not to use checkbox control at all. Better use your own images for checked/unchecked state on-top of hyperlink or image element. Cheers.
None of the above work well when using ASP.NET Web Forms and Bootstrap.
I ended up using Paul Sheriff's Simple Bootstrap CheckBox for Web Forms
<style>
.checkbox .btn, .checkbox-inline .btn {
padding-left: 2em;
min-width: 8em;
}
.checkbox label, .checkbox-inline label {
text-align: left;
padding-left: 0.5em;
}
.checkbox input[type="checkbox"]{
float:none;
}
</style>
<div class="form-group">
<div class="checkbox">
<label class="btn btn-default">
<asp:CheckBox ID="chk1" runat="server" Text="Required" />
</label>
</div>
</div>
The result looks like this...
Simplest best way, using the ASP checkbox control with custom design.
chkOrder.InputAttributes["class"] = "fancyCssClass";
you can use something like that.. hope that helps
paste this code in your css and it will let you customize your checkbox style. however, it's not the best solution, it's pretty much displaying your style on top of the existing checkbox/radiobutton.
input[type='checkbox']:after
{
width: 9px;
height: 9px;
border-radius: 9px;
top: -2px;
left: -1px;
position: relative;
background-color: #3B8054;
content: '';
display: inline-block;
visibility: visible;
border: 3px solid #3B8054;
transition: 0.5s ease;
cursor: pointer;
}
input[type='checkbox']:checked:after
{
background-color: #9DFF00;
}
Why not use Asp.net CheckBox button with ToggleButtonExtender available from the Ajax control toolkit.
Not sure that it's really an asp.net related question.. Give this a shot, lots of good info here:
http://www.456bereastreet.com/archive/200409/styling_form_controls/
Keep in mind that the asp:CheckBox control actually outputs more than just a single checkbox input.
For example, my code outputs
<span class="CheckBoxStyle">
<input id="ctl00_cphContent_cbCheckBox"
name="ctl00$cphContent$cbCheckBox"
type="checkbox">
</span>
where CheckBoxStyle is the value of the CssClass attribute applied to the control and cbCheckBox is the ID of the control.
To style the input, you need to write CSS to target
span.CheckBox input {
/* Styles here */
}
They're dependent on the browser really.
Maybe you could do something similar to the answer in this question about changing the file browse button.
Well, I went through every solution I could find.
The Ajax Control Toolkit works, but it creates a weird html output with all kinds of spans and other styling that is hard to work with.
Using css styling with the ::before tags to hide the original control's box would work, but if you placed runat=server into the element to make it accessible to the code-behind, the checkbox would not change values unless you actually clicked in the original control.
In some of the methods, the entire line for the label would end up under the checkbox if the text was too long for the viewing screen, or would end up underneath the checkbox.
In the end, (on the adice of #dimarzionist's answer here in this page) I used an asp.net ImageButton and used the codebehind to change the image. With this solution I get nice control over the styles and can determine whether the box is checked from the codebehind.
<asp:ImageButton ID="mycheckbox" CssClass="checkbox" runat="server" OnClick="checkbox_Click" ImageUrl="unchecked.png" />
<span class="checkboxlabel">I have read and promise to fulfill the rules and obligations</span>
And in the code-behind
protected void checkbox_Click(object sender, ImageClickEventArgs e) {
if (mycheckbox.ImageUrl == "unchecked.png") {
mycheckbox.ImageUrl = "checked.png";
//Do something if user checks the box
} else {
mycheckbox.ImageUrl = "unchecked.png";
//Do something if the user unchecks the box
}
}
What's more, is with this method, The <span> you use for the checkbox's text will wrap perfectly with the checkbox.
.checkboxlabel{
vertical-align:middle;
font-weight: bold;
}
.checkbox{
height: 24px; /*height of the checkbox image*/
vertical-align: middle;
}