Блог

Главная - Вопросы по программированию - как создать текст поверх кнопки, не воздействуя на кнопку

как создать текст поверх кнопки, не воздействуя на кнопку

#html #css #href

Вопрос:

Таким образом, моя кнопка работает только в определенных местах, у меня есть текст поверх кнопки, и, поскольку текст, удобная кнопка для нажатия не работает. позвольте мне пояснить: кнопка, которую я создал, работает частично, я думаю, что это из-за текста, я поместил текст в другой класс и добавил его к кнопке. как только текст появится, кнопка перестанет работать

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

Комментарии:

1. у этого кода много проблем. Я предлагаю вам ознакомиться с w3school сайтом jsfiddle.net/td3msj6b

Ответ №1:

Переместите текст( h2 ) внутрь <a>...here</a> . Затем снимите подчеркивание с text-decoration:none вкл .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')"/>
Метки: ,