support me for set link on the button that works in both responsive mode.
<button type="submit" class="btn btn-primary btn-learn">Get now <i class="icon-arrow-right3"></i></button>
I tried this also..
<p><a class="btn btn-primary btn-learn">send Request <i class="icon-arrow-right3"></i></a></p>
in this original code where i should include link
If you are asking how to add a link, in the second piece of code add an href parameter, like so:
<p>send Request <i class="icon-arrow-right3"></i></p>
I've designed a very basic landing page with a contact button.
I want to make sure that by clicking this button it will open the user's email client or webmail.
Is there a way to verify this or make sure it will work? I use Outlook, so in my computer it works.
This is the code for my button:
<div>
<a class="button-link" href="mailto:contacto#woodtechms.com">
<button type="button" class="contact-button btn btn-lg btn-danger center-block contact-button">Contact us</button>
</a>
</div>
Thank you.
I am asking this question because I was faced we this very problem and found little (unconcise) to none information on the matter, here goes:
Having an html form, how to properly set up a submit button with materializecss?
If you try the conventional way, that is:
<form>
<div class="file-field input-field">
...
<input type ="submit" class ="btn waves-effect waves-light" value = "Submit"/>
</div>
</form>
This is what you'll get:
As you can see the clickable part is only the middle of the button, and the rest won't trigger the form submition.
What i am looking for are answers (no javascript, just html) that offer alternatives. I'll post my own answer and hope for interesting alternatives.
This worked out great and allows for image inclusion:
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
Result:
<script>
Waves.attach('.YOUR-Button-Class', ['waves-button', 'waves-float']);
</script>
How would one put a link on a button with bootstrap?
there are 4 methods in the bootstrap documentation:
Link Button
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
The first one doesn't work for me, no button shows, just the text with the link, have a feeling its the theme im using.
The second one shows the button which is what i want, but whats the code make the button link to another page when clicked?
Cheers
The easiest solution is the first one of your examples:
Link Button
The reason it's not working for you is most likely, as you say, a problem in the theme you're using. There is no reason to resort to bloated extra markup or inline Javascript for this.
If you don't really need the button element, just move the classes to a regular link:
<div class="btn-group">
<a href="/save/1" class="btn btn-primary active">
<i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
</a>
Cancel
</div>
Conversely, you can also change a button to appear like a link:
<button type="button" class="btn btn-link">Link</button>
You can call a function on click event of button.
<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">
<script>
function relocate_home()
{
location.href = "www.yoursite.com";
}
</script>
OR
Use this Code
Link Button
Another trick to get the link color working correctly inside the <button> markup
<button type="button" class="btn btn-outline-success and-all-other-classes">
Button text with correct colors
</button>
Please keep in mind that in bs4 beta e.g. btn-primary-outline changed to btn-outline-primary
This is how I solved
<a href="#" >
<button type="button" class="btn btn-info">Button Text</button>
</a>
Combining the above answers i find a simply solution that probably will help you too:
<button type="submit" onclick="location.href = 'your_link';">Login</button>
by just adding inline JS code you can transform a button in a link and keeping his design.
You can just simply add the following code;
<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
Just use the anchor tag as a button. Change the role to type as below in bootstrap 5.
<a type="button" class="btn btn-info" href="#">Button</a>
I think the most easiest and clean approach is (without any extra javascript functions):
<a class="btn" href="#">
<i class="fas fa-cloud"></i>
</a>
To use fontawesome icons, you can just put the following link in your header:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
And that's all
As you are asking with Bootstrap, the best option in my opinion is to choose the class btn-link.
<button type="button" class="btn btn-link">Link</button>
If you want the btn-link to send you to another page or activate something such as a modal, you can include the onClick like others suggested.
If you really need the button element, a nice trick that I found to make it work looks like this:
Create a data attribute with the url that you want to redirect
Attach an event listener to fetch the url from the data attribute on element
Open the url using window.open or your preferred method
Html file
<button type="button" id="newpagebutton" class="btn btn-primary mt-4 ml-3">Open new page</button>
Javascript file
$( "#newpagebutton" ).attr('data-buttonlink', 'https://www.apple.com')
$( "#newpagebutton" ).click(function() {
const buttonlink = $("#newpagebutton").data('buttonlink')
window.open(buttonlink)
});
Have a look at how the implementation works on fiddle.js
<div>
<a href='#' className='text-decoration-none'>
<button className="btn btn-primary btn-lg px-5 d-flex justify-content-center" type='submit'>Sign In</button>
</a>
</div>
When a user clicks the button it has a href to another html page in the same folder as the current page to open.
But I get a 404 error, however it works for external websites.
This is the code:
<a class="btn btn-sample btn-lg" href="next.html">next page</a>
How could I correct this, thanks
use current directory href="./whatever"
<a class="btn btn-sample btn-lg" href="./next.html">next page</a>
<button type="button">
<a class=" *** " href="helloworld.html"/>
link name </a>
</button> // close tag /button