13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

Combining the a href + button tag?

by dansbanners
10 replies
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.
#button #combining #href #tag
Avatar of Unregistered
  • Profile picture of the author Hasib Mahmud
    Thanks, Brother
    {{ DiscussionBoard.errors[11409906].message }}
    • Profile picture of the author dansbanners
      Originally Posted by Hasib Mahmud View Post

      Thanks, Brother
      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?
      Signature
      Welcome to Dansbanners!
      {{ DiscussionBoard.errors[11409988].message }}
  • Profile picture of the author Michael D Price
    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
    {{ DiscussionBoard.errors[11410868].message }}
  • Profile picture of the author srdjanm
    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.
    {{ DiscussionBoard.errors[11411021].message }}
  • Profile picture of the author Jari Niemi
    Originally Posted by dansbanners View Post

    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.
    Button sample:

    https://superdevresources.com/super-...st-button-css/
    {{ DiscussionBoard.errors[11411597].message }}
  • Profile picture of the author ANJANBD
    <a class="button" href="#">This is Button</a>
    <style>
    .button{
    padding:5px;
    background:black;
    color:white;
    border-radius:5px;
    }
    a{
    text-decoration:none;
    }
    </style>
    Signature
    7 Best Mailchimp Alternatives || WordPress Plugins Collections
    12 Best Affiliate Marketing Tools || Best Email Marketing Tools
    {{ DiscussionBoard.errors[11412469].message }}
    • Profile picture of the author Marek Anral
      Add "display:block;" to "button" class, then whole button will be clickable.
      {{ DiscussionBoard.errors[11434571].message }}
  • Profile picture of the author swati tiwari
    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
    };
    {{ DiscussionBoard.errors[11430981].message }}
    • Profile picture of the author dansbanners
      Originally Posted by swati tiwari View Post

      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
      };
      Yes. That's another way to do it. I settled on <a class="button"...> and CSS. Thanks.
      Signature
      Welcome to Dansbanners!
      {{ DiscussionBoard.errors[11431769].message }}
  • Profile picture of the author shraddha patel
    <input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

    <script>
    function relocate_home()
    {
    location.href = "www.yoursite.com";
    }
    </script>
    {{ DiscussionBoard.errors[11501302].message }}
Avatar of Unregistered

Trending Topics