Ways to enhance the appearance of this button arrangement

Question

Ways to enhance the appearance of this button arrangement

Having trouble setting an image as the button and getting rid of the lines in-between the buttons. Any assistance would be greatly appreciated. Thank you.

All names, links, and files used here are just for illustrative 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 class="button">Test 1</button>
    </a>
    <a href="https://www.twitch.tv/directory">
      <button class="button">Test 2</button>
    </a>
  </div>
  <a href="https://duckduckgo.com/?q=translate&t=chromentp&atb=v314-1&ia=web">
    <button class="button">Test 3</button>
  </a>

html css

Answer 1

Answer №1

Having the right tool is key.

A button nested inside an anchor tag is not valid in HTML. Avoid using javascript when plain HTML will suffice.

Simplify by using a link and customizing its style as needed. The crucial step is to set your a element to display:inline-block, then apply button-esque styling

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

.button:hover {
  /*Add hover effect*/
  text-shadow: 2px 2px 1px white;
}

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

Alternative methods like flex or CSS grid can be used for layout, but I'll stick to the basics for now.

Answer 2

Having the right tool is key.

A button nested inside an anchor tag is not valid in HTML. Avoid using javascript when plain HTML will suffice.

Simplify by using a link and customizing its style as needed. The crucial step is to set your a element to display:inline-block, then apply button-esque styling

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

.button:hover {
  /*Add hover effect*/
  text-shadow: 2px 2px 1px white;
}

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

Alternative methods like flex or CSS grid can be used for layout, but I'll stick to the basics for now.

Answer 3

Answer №2

To remove the line under the Anchor text, you can simply add text-decoration:none. However, I suggest delving into HTML and CSS tutorials to grasp a better understanding. You can achieve the same result without using <H1> tags which are primarily meant for headers.

There are other ways to center buttons and divs without relying on h1 tags. You can also style anchors to resemble buttons if that fits your preference. The possibilities are endless in the web development world.

<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 class="button">Test 1</button>
      </a>
      <a href="https://www.twitch.tv/directory">
        <button class="button">Test 2</button>
      </a>
    </div>
    <a href="https://duckduckgo.com/?q=translate&t=chromentp&atb=v314-1&ia=web">
      <button class="button">Test 3</button>
    </a>
  </h1>
</body>

Answer 4

To remove the line under the Anchor text, you can simply add text-decoration:none. However, I suggest delving into HTML and CSS tutorials to grasp a better understanding. You can achieve the same result without using <H1> tags which are primarily meant for headers.

There are other ways to center buttons and divs without relying on h1 tags. You can also style anchors to resemble buttons if that fits your preference. The possibilities are endless in the web development world.

<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 class="button">Test 1</button>
      </a>
      <a href="https://www.twitch.tv/directory">
        <button class="button">Test 2</button>
      </a>
    </div>
    <a href="https://duckduckgo.com/?q=translate&t=chromentp&atb=v314-1&ia=web">
      <button class="button">Test 3</button>
    </a>
  </h1>
</body>

Answer 5

Answer №3

.wrap-all {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rowone {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.rowtwo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.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 class="wrap-all">

      <div class="rowone">
        <div class="button-div" onclick="location.href='https://www.youtube.com/';">
          <img class="img-wrapper" src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c545.png" />
          <span class="title-btn">Youtube</span>
        </div>


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

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



    </div>


</body>

Answer 6

.wrap-all {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rowone {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.rowtwo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.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 class="wrap-all">

      <div class="rowone">
        <div class="button-div" onclick="location.href='https://www.youtube.com/';">
          <img class="img-wrapper" src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c545.png" />
          <span class="title-btn">Youtube</span>
        </div>


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

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



    </div>


</body>

Ways to enhance the appearance of this button arrangement

Answer №1

Answer №2

Answer №3

Similar questions

A single snippet of JavaScript blocking the loading of another script

The Angular Table row mysteriously vanishes once it has been edited

What is the reason that PHP has the ability to set Cookies but Local Storage does not?

The Python Django site is failing to detect and implement CSS updates

React - Render an element to display two neighboring <tr> tags

Using the ternary operator in a Python HTML template

Challenges with jQuery Image Sliders

Utilize CSS with dynamically created elements

There is a single div sandwiched between two others, with each of the surrounding divs reaching the edge of the browser

Why is the image not disappearing even after using JavaScript to do so?

Is there a way to showcase whitespacing in HTML?

Retrieve the data stored in the HTML input field prior to transferring it to the SQL database

Learn how to dynamically insert input data into a table based on a specific ID in React JS!

Utilizing personalized CSS for specific ioslides

Having trouble with imagecopyresampled function, unsure of the reason behind its malfunction

Exploring the Power of Websharper with Sitelets and Forms

flask - Transfer data from Python to HTML using a database

Setting the root position of a div: How can it be done?

Any tips for modifying my jQuery script so that a div smoothly tracks my cursor's movement?

Changing the navigation bar's position from fixed to static while scrolling using Bootstrap