CSS & HTML Button Under each other adding text in between-CodePudding

I'm trying to create 2 buttons with different links and have the second button be a clickable image. For some reason the text in between the buttons acts as a hyperlink. How do I fix this?

.button1 {
  background-color: #E44040;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}  
  
.button2 {
  border: none;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}
</style>
</head>
<body style="font-family: arial">
        <p>Click the button below For youtube</p>
    <div>
        <a href="https://www.youtube.com/" method="get" target="_blank">
        <button >Youtube</button>
    </div>
    <div>
        <p>Click the button below fork Reddit</p>
        <a href="https://www.reddit.com/" method="get" target="_blank">
        <button  style="border: 0; background: transparent">
        <img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90"></button>
    </div>

CodePudding user response：

You forgot to close the a tags. Try this:

<div>
        <a href="https://www.youtube.com/" method="get" target="_blank">
            <button >Youtube</button>
        </a>
    </div>
    <div>
        <p>Click the button below fork Reddit</p>
        <a href="https://www.reddit.com/" method="get" target="_blank">
            <button  style="border: 0; background: transparent">
        </a>
        <img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90"></button>
    </div>

CodePudding user response：

You have not closed the <a> tag.

This is the corrected code:

.button1 {
  background-color: #E44040;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}  
 
.button2 {
  border: none;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}

<body style="font-family: arial">
        <p>Click the button below For youtube</p>
    <div>
        <a href="https://www.youtube.com/" method="get" target="_blank"></a>
        <button >Youtube</button>
    </div>
    <div>
        <p>Click the button below fork Reddit</p>
        <a href="https://www.reddit.com/" method="get" target="_blank"></a>
        <button  style="border: 0; background: transparent">
        <img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90">
        </button>
    </div>
    </body>