如何在不影响按钮的情况下在按钮顶部创建文本答案

【问题标题】：how do you create a text on top of a button wothout effecting the button如何在不影响按钮的情况下在按钮顶部创建文本
【发布时间】：2021-10-24 19:12:41
【问题描述】：

所以我的按钮只能在指定的位置工作，我在按钮顶部有一个文本，并且由于文本点击友好按钮不起作用。让我详细说明：我创建的按钮部分工作，我认为是因为文字，我已将文本放在不同的类中并将其添加到按钮中。由于文本在那里，按钮停止工作

.tab {
  position: absolute;
  width: 1440px;
  height: 69px;
  left: 0px;
  top: 13px;
  background: #C4C4C4;
}

h1 {
  position: absolute;
  width: 1122px;
  height: 60px;
  left: 411px;
  top: 395px;
  font-family: Public Sans;
  font-style: normal;
  font-weight: 500;
  font-size: 64px;
  line-height: 75px;
  color: #B04AEF;
}

.newbutton {
  position: absolute;
  width: 412px;
  height: 63px;
  left: 514px;
  top: 598px;
  background: #E44444;
  border-radius: 54px;
}

.text {
  position: relative;
  width: 218px;
  height: 44px;
  left: 675px;
  top: 579px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: 42px;
  color: #FFFFFF;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Home town</title>
</head>
<link rel="stylesheet" href="indexhtml.css">

<body>
  <div class="tab"></div>
  <h1>Welcome to your home</h1>
  <a class="newbutton" href="https://www.bitbucket.com" target="blank"></a>
  <h2 class="text">Entry</h2>
  <script src="js.js"></script>
</body>

</html>

【问题讨论】：

这段代码有很多问题。我建议你阅读w3school 网站jsfiddle.net/td3msj6b

标签： html css href

【解决方案1】：

将文本(h2) 移动到<a>...here</a> 内。然后在.newbutton 上删除带有text-decoration:none 的下划线。最后通过top和left来调整位置。

.tab{
    position: absolute;
    width: 1440px;
    height: 69px;
    left: 0px;
    top: 13px;
    background: #C4C4C4;
}
h1{
    position: absolute;
    width: 1122px;
    height: 60px;
    left: 411px;
    top: 395px;
    font-family: Public Sans;
    font-style: normal;
    font-weight: 500;
    font-size: 64px;
    line-height: 75px;
    color: #B04AEF;
}
.newbutton{
    position: absolute;
    width: 412px;
    height: 63px;
    left: 514px;
    top: 598px;
    background: #E44444;
    border-radius: 54px;
    text-decoration: none;
}
.text{
    position: relative;
    width: 218px;
    height: 44px;
    left: 41%;
    top: -27%;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    color: #FFFFFF; 
}

    <div class="tab"></div>
    <h1>Welcome  to  your  home</h1>
    <a class="newbutton" href="https://www.bitbucket.com" target="blank">
<h2 class="text">Entry</h2></a>

另一种解决方案是使用按钮并设置样式

.tab{
    position: absolute;
    width: 1440px;
    height: 69px;
    left: 0px;
    top: 13px;
    background: #C4C4C4;
}
h1{
    position: absolute;
    width: 1122px;
    height: 60px;
    left: 411px;
    top: 395px;
    font-family: Public Sans;
    font-style: normal;
    font-weight: 500;
    font-size: 64px;
    line-height: 75px;
    color: #B04AEF;
}
.newbutton{
    position: absolute;
    width: 412px;
    height: 63px;
    left: 514px;
    top: 598px;
    background: #E44444;
    border-radius: 54px;
    text-decoration: none;
    font-family: Roboto;
    color: #FFFFFF; 
    font-size: 36px;

}

    <div class="tab"></div>
    <h1>Welcome  to  your  home</h1>
    <input type="button" class="newbutton" value="Entry" onclick=" window.open('https://www.bitbucket.com','_blank')"/>

【讨论】：