I have forms with links and I'd like to style them like buttons. I have been trying many different styles but none seem to look as good as a normal input button.
Is there a way I can just replace the with a button? Would I need to put the inside a ? Also if there is a way then will a search engine be able to follow the link?
<a href="http://www.stackoverflow.com">
<input type="button" name="so_link" value="Click me!">
</a>
This will work and give you a "normal" input button. Search engines should also be able to resolve the link as it is a "normal" hyperlink with the usual link text replaced by a button.
Most search engines can't follow <button> or <input> elements.
I would suggest you make keep them as links (<a> elements), just style them as buttons.
Try the following CSS:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
I'd recommend styling the element yourself thought but this should work, not sure about browser compatibility. Otherwise you can make a form with only a button and set the URL as the action parameter.
You can use the specific button attribute:
<a href="http://www.stackoverflow.com" style="text-decoration:none">
<button label="Press Me" name="so_link">Press me</button>
</a>
DEMO
To style the link, you can use CSS 3 rounded corners and/or background images to have it look like a button. Where is the problem?
You can also use an input button as a link naturally. But I'd prefer the tag solution, because it is semantically closer to what you are going to express. Anyway, a button would look like this:
<input type="button" onclick ="window.location.href('http://foo.com')" value="Click me!" />
here ou have nice CSS3 buttons i've created some time ago.
http://jsfiddle.net/seler/SzAM3/embedded/result/
if you are after the design of your button, why not try to use an image instead of an input button?
<img src="button.jpg" alt="button function" />
this is what i often used in my programs :) and you could design and play with the look of your actual button using adobe photoshop.
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
so basically I have this button that doesn't work, when I hover over it my cursor doesn't change and when I click it nothing happens, here's the buttons line of code:
<button href="dwr.php" class="dwrbutton fas fa-address-card"> <div class="dwrtext">DWR</div></button>
Href is not a button attribute.
https://www.w3schools.com/tags/tag_button.asp
Use a form with the link as action, or try a <A> tag with styling
add button class to anchor tag
<div class="dwrtext">DWR</div>
If you want to set a href on your button simply wrap it with an anchor element.
Your code should look something like this:
<button href="dwr.php" class="dwrbutton fas fa-address-card">DWR</button>
If you really need to use the button-tag, then you should look here for a solution to your problem. Especially preferred if you need the button-tag within a form.
If you don't care how the link is implemented, then I would personally use an a-tag, which you can then design according to your preferences, also like a button.
Have fun and good luck!
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
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>
Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?
Simply add a title to your button.
<button title="Hello World!">Sample Button</button>
both <button> tag and <input type="button"> accept a title attribute..
Use title attribute.
It is a standard HTML attribute and is by default rendered in a tooltip by most desktop browsers.
For everyone here seeking a crazy solution, just simply try
title="your-tooltip-here"
in any tag. I've tested into td's and a's and it pretty works.
A button accepts a "title" attribute. You can then assign it the value you want to make a label appear when you hover the mouse over the button.
<button type="submit" title="Login">
Login</button>
The title attribute is meant to give more information. It's not useful for SEO so it's never a good idea to have the same text in the title and alt which is meant to describe the image or input is vs. what it does. for instance:
<button title="prints out hello world">Sample Buttons</button>
<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />
The title attribute will make a tool tip, but it will be controlled by the browser as far as where it shows up and what it looks like. If you want more control there are third party jQuery options, many css templates such as Bootstrap have built in solutions, and you can also write a simple css solution if you want. check out this w3schools solution.
If your button still doesn't show anything with title, check if your button is NOT disabled
You should use both title and alt attributes to make it work in all browsers.
<button title="Hello World!" alt="Hello World!">Sample Button</button>