文本未显示在边框 html/css 上

Question

I'm trying to make a simple button. But instead of <button> , I'm using <div> and <p> , but the result will show up as only border, and the text won't show up over the border.

Am I doing something wrong?

Screenshot of the button:

 .Something4 { margin-top: -72px; margin-left: 335px; font-size: 20px; width: 110px; height: 60px; border: 1px solid #E12976; border-radius: 20px; } .Something4 p2 { margin-left: 335px; width: 100px; height: 50px; }

 <div onclick="location.href='Login.php';" style="cursor: pointer;" class="Something4"> <p2 style="font-family: Sans-serif;font-size:16px;font-style:normal;">Login</p2> </div>

Answer 1

I copied your code into codepen.com. margin-top: -72px; is moving your button off the screen. The second margin-left: 335px; in the p2 section is moving the text out of your button. Try removing all your margins and see how it looks:

.Something4 {
  font-size: 20px;
  width: 110px;
  height: 60px;
  border: 1px solid #E12976;
  border-radius: 20px;
}
.Something4 p2 {
    width: 100px;
    height: 50px;
}

Keep in mind the margin inside the p2 tag will not replace the margin on the border itself, and having negative margins might not always do what you think.

Answer 2

I would highly recommend using semantic markup to describe the content of your page. This helps make your content accessible and work as expected across a variety of devices and use cases that you might not be capturing.

So use an anchor tag <a> to link to \\login.php , and then you can choose to style that similar to a button if you'd like.

 body { padding: 15px; background: #211f1f; } a.login-button { color: salmon; border: 1px solid salmon; padding: 10px 15px; border-radius: 20px; text-decoration: none; }

 <a href="login.php" class="login-button">Login</a>