Button hyperlink issue HTML/CSS

user_13302715 0
Viewed 53

I am a beginner. I would like my button which is created of a circle with an icon to be a hyperlink to my Twitter account, I tried many ways to do it but they didn't work. Thanks in advance for your answers. Any help will be appreciated.

HTML:

<button type="button" id="twitter-icon">
    <img src="img/twitter-icon.svg">
</button>

CSS:

#twitter-icon {
    border: none;
    color: none;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    backface-visibility: hidden;
    background-color: none;
    width: 0px;
    height: 0px;
    display: inline-block;
    margin-right: 70px;
    margin-top: 150px;
}
button css html
3 Answers

Wrapping your button with an anchor tag will do the trick

<a id="twitter-link" href="your_twitter_link">
    <button type="button" id="twitter-icon">
      <img src="https://www.choiceofgames.com/icons/appstore.svg">
    </button>
</a>
user_106415110

To make your button act as hyperlink you need to wrap it with anchor tag and provide attribute href="url" where url is the link to the page you want user to be re-directed after clicking on it. Here is the code

<a id="twitter-icon" href="link-of-your-twitter-account">
    <button type="button" id="twitter-icon">
        <img src="img/twitter-icon.svg">
    </button>
</a>

And to make your button circular add border radius property to you button as

button{
  border-radius: 50%;
}
user_139359490 
<div>
 <a href="url">
   <button class="twitter-button">
    <img src="img/twitter-icon.svg">
   </button>
 </a>
</div>

#twitter-icon {
    border: none;
    color: none;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    backface-visibility: hidden;
    background-color: none;
    width: 0px;
    height: 0px;
    display: inline-block;
    margin-right: 70px;
    margin-top: 150px;
}
.twitter-button{
  border-radius: 50%;
  cursor: pointer;
}

wrapped button into<a> ...</a> and for circle button border-radius to 50%

user_130076140
Related