按钮超链接问题HTML/CSS

Question

我是个初学者。我希望我的按钮是由一个带图标的圆圈创建的，作为我推特账户的超链接，我尝试了很多方法，但都不起作用。提前感谢您的回答。任何帮助都将不胜感激。

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

Answer 1

用锚标签包裹你的按钮可以实现

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

Answer 2

要使您的按钮充当超链接，您需要用锚标记包裹它，并提供属性href="url"；其中url是指向您希望用户在单击后重新定向的页面的链接。这是代码

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

为了使你的按钮是圆形的，将边界半径属性添加到你的按钮中作为

button{
border-radius: 50%;
}

Answer 3

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

将按钮包裹到<a> ...</a>中，对于圆形按钮，边界半径为50%