I've been thinking about this for a little while and maybe i started the button wrong in the beginning but need to know what is the correct / best way to proceed.
I have the following code
<button class="more-button">FIND OUT MORE <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
I thought I'd be able to hadd a a href after the class, but that didn't work.
At the moment I'm doing this
<button class="more-button">FIND OUT MORE <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
Is this ok ?
Should I be doing something different ?
thanks.
Without using JavaScript the only thing that is the way, wich is most recommended.
You have to use a form tag and an action attribute like:
<form action="http://example.com">
<input type="submit" value="Examplevalue" />
</form>
You could also style a link as a button with css.
Testbutton
CSS:
button{
appearance: button;
moz-appearance: button;
webkit-appearance: button;
}
<form method="GET" action="YOUR_Url"><button type="submit">Text</button></form>
This should work if you replace YOUR_URL with the targeted URL.
Related
I am new to programming and just trying to get a simple button to link to google. However it seems every time I press it, it disappears. Any help would be great.
Below I have put my simple button using Boostrap, I just used the button and added an href to link to google with an i class of fa-edit,
<a href="https://www.google.se" class="btn btn-danger">
<i class="fa fa-edit fa-fw"></i>
google
</a>
Fiddle link
I'm sure it's a silly mistake, but any help would be great.
If you add the target attribute it will know to open in a new window I think that is why you are not having any luck making it work in your fiddle.
<a class="btn btn-danger" href="https://www.google.se/"
target="_blank"> <i class="fa fa-edit fa-fw"></i> google</a>
this is our code; we tried to link a page with a button, but the page is not opening,instead after clicking the button it redirects to the same page as the button.
The code for the button is:
<a href="search.html"><div class="form-group">
<button name="signup" class="btn btn-lg btn-primary btn-block" type="submit">Send Query</button></div></a>
Please help us debug this.
I think you should add your css classes on the link so it looks like a button Send Query
Your question is not clear at all, try this code,
Send Query
Make sure that you have placed the files in same directory?
And then Try this code :
<div class="form-group">
Signup
</div>
Then you may give your anchor tag look and feel same like button.
I'm having some html problems, was looking everywhere but couldn't find the right answer.
I need an add to cart button with font awesome icon in front.
The orig html is:
<i class="fa fa-shopping-cart"></i>[ADD_TO_CART]
I need to convert it into this code:
<input type="submit" name="add_to_cart" class="mod_bakery_bt_add_f" value="[ADD_TO_CART]" />
Please help,
I am getting error via http://validator.w3.org/ while validating my html5 template. I get the message "The element button must not appear as a descendant of the a element.". I can't understand this. Could anyone help me to solve this?
Here is my code:
<div class="post-response btn-group btn-group-lg">
<button type="button" class="btn btn-default"><i class="fa fa-comment"> 5 Comments</i></button>
<button type="button" class="btn btn-default"><i class="fa fa-heart"> 5 Likes</i></button>
</div>
The usual error from the W3C validator is:
The element button must not appear as a descendant of the a element
This makes more sense for your question, as you have a button that is a descendant of an anchor.
Normally, you could solve the issue by simply styling your anchor tag, or by placing the button within a form element:
<form style="display: inline" action="http://www.example.com/" method="get">
<button>Some Call to Action</button>
</form>
But in your case, I don't think you even need the anchors as you aren't linking anywhere using HTML (and if you are attaching events using JavaScript, you could simply attach those events to the button rather than the anchor.
How to replace the submit button with a link without using javascript ? is there any way to add the submit attribute to a link ? because the form will not be sent by a simple link without "submit".
<form:form action="/getPage" >
<div class="buttons">
<a class="link" href="">
<img src="icon.png" />
</a>
</div>
</form:form>
I work in an application web so if i use javascript the link will not be mapped by the server ..
You can not submit a form using an <a> tag alone. You will need some type of javascript to assist, if you insist on using the <a> tag:
Submit the Form
or
Submit the Form
or super hack:
Submit the Form, then on backendPage.php you can use $_GET requests to process information, and redirect the visitor to the intended page. But that's a horrible idea haha
Try this:
CSS
button {
background:none!important;
border:none;
padding:0!important;
/*border is optional*/
border-bottom:1px solid #444;
}
HTML
<button>your button that looks like a link</button>
This can achieve the same effort and it looks like <a>
Note: btn btn-link comes from bootstrap
<button class="btn btn-link" type="submit"><img src="icon.png" /></button>
There is an another way out. Using this method you can use any element to submit a form.
Following is an example:
<span onclick="$('#submit').trigger('click')" style="cursor:pointer;">
anything
</span>
Add a hidden submit button:
<input style="display:none;" type="submit" id="submit"/>
This will behave exactly as actual submit button.