text not showing over border html/css

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:

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

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.

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

body {
    padding: 15px;
    background: #211f1f;
}

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

<!-- language: lang-html -->

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

<!-- end snippet -->