How to make this button layout look better-CodePudding

I need help with putting an image as the button as it won't work, and removing those lines in-between the buttons. If you can help please do. Thanks.

All the links, names, and files are for example purposes.

.button {
  width: 200px;
  height: 80px;
  font-weight: 700;
  font-size: 17px;
  margin: 20px;
  background: url(button1.jpg);
  background-size: cover;
}

<h1 style="text-align:center;">
  <div id=button12>
    <a href="https://www.youtube.com/">
      <button >Test 1</button>
    </a>
    <a href="https://www.twitch.tv/directory">
      <button >Test 2</button>
    </a>
  </div>
  <a href="https://duckduckgo.com/?q=translate&t=chromentp&atb=v314-1&ia=web">
    <button >Test 3</button>
  </a>

CodePudding user response：

 .button {
   width: 200px;
   height: 80px;
   font-weight: 700;
   font-size: 17px;
   margin: 20px;
   background: url(button1.jpg);
   background-size: cover;
 }

 .button-div {
   border: 1px solid black;
   height: auto;
   width: 100px;
   display: flex;
   justify-content: center;
   align-items: center:
 }

 .wrapper {
   display: flex;
 }

 .img-wrapper {
   object-fit: fill;
   object-position: right;
   height: 100%;
   width: 100%;
 }

 .title-btn {
   position: absolute;
   z-index: 999;
   font-size: 12px;

 }

<body>
  <h1 style="text-align:center;">
    <div id=button12>
      <div  onclick="location.href='https://www.youtube.com/';">
        <img  src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c545.png" />
        <span >Youtube</span>
      </div>

      <div  onclick="location.href='https://www.twitch.tv/directory/';">
        <img  src="https://www.freepnglogos.com/uploads/twitch-app-logo-png-3.png" />
        <span >Twitch</span>
      </div>

      <div  onclick="location.href='https://duckduckgo.com/?q=translate&t=chromentp&atb=v314-1&ia=web';">
        <img  src="https://download.logo.wine/logo/DuckDuckGo/DuckDuckGo-Logo.wine.png" />
        <span >Duck</span>
      </div>
    </div>


</body>

CodePudding user response：

Use the right tool.

You can't have a button inside an anchor tag, it's invalid HTML. Don't use javascript when regular HTML will do.

Simply use a link and style it how you want. The key point is to make your a element display:inline-block, then give it button-like styling

.button {
  width: 200px;
  height: 80px;
  font-weight: 700;
  font-size: 17px;
  margin: 20px;
  /*Use Your image*/
  background: url("http://www.fillmurray.com/g/200/80");
  /*Make it an inline block*/
  display: inline-block;
  background-size: cover;
  border: 2px inset grey;
  /*remove default link styling*/
  text-decoration: none;
  color: black;
  /*Vertiaclly align text - there are other ways but this is quick*/
  line-height: 80px;
  /*Making the text "readable"*/
  text-shadow: 1px 1px 0px white;
}

.button:hover {
  /*Throw some hover love*/
  text-shadow: 2px 2px 1px white;
}

<h1 style="text-align:center;">
  <div id=button12>
    <a href="https://www.youtube.com/" >Test 1</a>
    <a href="https://www.twitch.tv/directory" >Test 2</a>
  </div>
  <a href="https://duckduckgo.com/?q=translate&t=chromentp&atb=v314-1&ia=web" >Test 3</a>
</h1>

There are better ways to handle the layout, flex or css grid could be used here, but I'll just cover the basics for now.

CodePudding user response：

You can add text-decoration:none on the Anchor to remove that line. I would however humbly recommend that you check out both HTML and CSS tutorials, and proceed to rewrite this code in another way. For instance, your <H1> had no closing, nor is it really for anything else than putting a header somewhere.

You can center buttons and divs without using h1, and you can style the anchors to look like buttons if that is what you'd like. The world is your domain.

<style>
  .button{
    width:200px;
    height:80px;
    font-weight:700;
    font-size:17px;
    margin:20px;
    background:url(button1.jpg);
    background-size: cover;
  }
  a {
    text-decoration:none;
  }
</style>

<head>
  <title>Registrations site</title>
</head>
<body>
  <h1 style="text-align:center;">
    <div id=button12>
      <a href="https://www.youtube.com/">
        <button >Test 1</button>
      </a>
      <a href="https://www.twitch.tv/directory">
        <button >Test 2</button>
      </a>
    </div>
    <a href="https://duckduckgo.com/?q=translate&t=chromentp&atb=v314-1&ia=web">
      <button >Test 3</button>
    </a>
  </h1>
</body>