时间戳

首页 > 解决方案 > 如何在不影响按钮的情况下在按钮顶部创建文本

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

问题描述

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

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

标签： htmlcsshref

解决方案

将 text( h2) 移动到<a>...here</a>. text-decoration:none然后用on删除下划线.newbutton。最后通过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')"/>

推荐阅读