Button hyperlink issue HTML/CSS

Question

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;
}

Mohammad Agha · Accepted Answer · 2020-10-06 16:21:06Z

1

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>

answered Oct 6, 2020 at 16:21

Mohammad Agha

1188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham V · Accepted Answer · 2020-10-06 17:04:16Z

1

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%;
}

answered Oct 6, 2020 at 17:04

Shubham V

214 bronze badges

Comments

Roopam · Accepted Answer · 2020-10-06 17:03:38Z

0

<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%

answered Oct 6, 2020 at 17:03

Roopam

255 bronze badges

Collectives™ on Stack Overflow

Button hyperlink issue HTML/CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related