Combining the a href + button tag?

by 10 replies
13
Would it cause any problems in the website or any browers?

<a href="whatever.html'><button>text in here</button></a>

Is there a better alternative? Thanks.
#programming #button #combining #href #tag
  • Thanks, Brother
    • [1] reply
    • Glad you found it helpful. However, I'm wondering if it'll cause any problems or if there's a better way to do it, etc?
  • To be honest,
    I am a big fan of bootstrap.
    Using bootstrap you can just apply a button style to an anchor link and get the desired visual effect of a button.

    To do this without using booststrap, you should remove the button code, and just use css to style the link to look like a button.

    For a more advanced method, use javascript for the linking.
    https://codepen.io/svinkle/pen/FHGBh
    • [ 2 ] Thanks
  • No, it isn't valid HTML5 according to the HTML5 Spec Document from W3C:

    In other words, you can nest any elements inside an <a> except the following:
    Code:
    <a>
<audio> (if the controls attribute is present)
<button>
<details>
<embed>
<iframe>
<img> (if the usemap attribute is present)
<input> (if the type attribute is not in the hidden state)
<keygen>
<label>
<menu> (if the type attribute is in the toolbar state)
<object> (if the usemap attribute is present)
<select>
<textarea>
<video> (if the controls attribute is present)

    If you are trying to have a button that links to somewhere, wrap that button inside a <form> tag as such:

    Code:
    <form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>
    However, if your <button> tag is styled using CSS and doesn't look like the system's widget... Do yourself a favor, create a new class for your <a> tag and style it the same way.
    • [ 1 ] Thanks
  • Button sample:

    https://superdevresources.com/super-...st-button-css/
    • [ 2 ] Thanks
  • <a class="button" href="#">This is Button</a>
    <style>
    .button{
    padding:5px;
    background:black;
    color:white;
    border-radius:5px;
    }
    a{
    text-decoration:none;
    }
    </style>
    • [ 1 ] Thanks
    • [1] reply
    • Add "display:block;" to "button" class, then whole button will be clickable.
      • [ 1 ] Thanks
  • There is no alternate tag for <a> in HTML. But you can create it's alternative using JavaScript.

    It is way less efficient than <a> tag. But if you still want to do it, follow me.

    HTML:

    <body>
    <p class="para">
    <span id="redirect">
    </span>
    </p>

    CSS:

    .para {
    font-family: sans-serif;
    color: #F00;
    font-size: 127%;
    text-decoration: none;
    }
    #redirect {
    font-family: inherit;
    color: #0F0;
    text-decoration: underline;
    }
    JavaScript:

    document.getElementById("redirect").onclick(redire ct());
    function redirect() {
    window.location.href="whatever.html";
    //May load a cached page
    };
    • [ 1 ] Thanks
    • [1] reply
    • Yes. That's another way to do it. I settled on <a class="button"...> and CSS. Thanks.
  • [DELETED]
  • <input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

    <script>
    function relocate_home()
    {
    location.href = "www.yoursite.com";
    }
    </script>
    • [ 1 ] Thanks
Join the discussion

Next Topics on Trending Feed