This is my code, when I take away the span tag it works, did i do something illegal?
<center><button class="btn" href="about.html"><span>About</span></button></center>
You should be using anchor tags
<button class="btn"><span>About</span></button>
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
I have code that's loosely based on the CSS of Bootstrap. One thing I did different is I placed the .btn class inside a button. However it seems like there are many times when the spacing is different and I cannot work out why.
Can anyone give me some advice here. Is it a nono to place the .btn inside a <button> element instead of a <div> when I am using all of the standard CSS for bootstrap?
My guess is that it permits to visually customize more your element when using a div (or an a tag) than when using a button tag since button tag has more associated attributes.
You are likely not wrapping the buttons with a <div> with the .btn-group class.
For example:
<div class="btn-group">
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
</div>
There are many additional class modifiers you can add. Check out the component button-group documentation.
Times where you may not use the <button> element would be if you have <a> acting as a button in a <ul>, or in an HTTP Form where you'd want the <input> element to be the button.
I am trying to make Disqus comment counter link in Bootstrap button, but everything I tried was unsuccessful.
The idea is that the whole button should be link.
When I am trying to do like this:
<a href="page.html#disqus_thread">
<button type="button" class="btn btn-default"></button>
</a>
the Disqus just overwriting everything about Bootstrap button CSS and just leave naked link like "1" (I left just number in disqus settings).
When I am trying this way:
<button type="button" class="btn btn-default">
</button>
the button appears, as well as comment counter link, but the button is not the link like if it was wrapped into <a> tag. So I need some help.
What you are trying is not valid HTML. Try something like this:
I want to create an HTML help button (that looks like an image).
What is the best semantic way to do it ?
Here's what I was thinking about:
1st solution:
HTML
<button class='help'>
<img/>
</button>
2nd solution:
HTML
<button class='help'>
</button>
CSS
button.help
{
background-image:...;
}
3rd solution
HTML
<img class='button' src='blabla'/>
I think the button tag is indispensable as it will behave like a button (you can click on it to get some help, basically)
If you are using the button for some form submission, than I would prefer using
<input type="image" src="PATH_TO_IMAGE" alt="Submit Button" />
If you want to stick to the button tag, I would prefer using the background-image way.
Why?
Well, you can use CSS Sprites for your website and place the image on the canvas, than map the images using background-position property, this way it will reduce http request by one, in fact not just one, it will save you more if you wish to have more buttons with different images later...
I would say:
<button class='help'>
</button>
Could also add:
<button class="help" role="button">Help</button>
I have a <button> with a hyperlink tag inside, looks like this:
<button class="btn"></button>
This works well in Chrome and Safari, BUT doesn't work in Firefox (ver 20 tested).
What's wrong?
To make it work in all browser, Firefox too you have to change it to
<button class="btn"></button>
or as suggested by Billy Moat in case of bootstrap there was no need of <button> you could just do
GO
Probably better to just do this:
Go!
This issue is happening in FF and IE(< 10).
The browser simply doesn't like the tag button when it's used as a link.
Quick solution in bootstrap is to use and give a class of btn btn-default (or your choice of button style).
However, you can use in a form (submit button for instance) and you shouldn't have an issue.
You can simply use an onclick method instead of changing the HTML structure, if you can't change your structure because of something that doesn't allow you to change(e.g. bootstrap components as list-groups, that's my case hehe) and mainly if you want to put two or more links inside a button:
<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
In case you are using wordpress wp_loginout function. This function create a link for login/logout to nest the link inside a button for styling eg: using btn btn-primary just replace the <button> tag it with a <span> tag
<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>
Nesting an <a> tag inside a <button>, or vice versa, violates HTML rules and will not pass a code validator:
"The element <a> must not appear as a descendant of the <button> element."
If you want your button to behave like a link, or your link to look like a button, you can style your link to look like a button with CSS or Bootstrap, as shown by Billy Moat's answer,
OR
you can use location.href in the button tag:
<button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button>
<button onclick="window.location.href='/css_page.html'">CSS page</button>
This worked for me to retain bookstrap btn-group stylings:
<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>