HTML/CSS: Getting links styled like buttons to stack

Question

I'm currently working on a simple project in HTML/CSS (Bootstrap). Very simply, I have the task of styling links to look like buttons, and getting them to stack in a mobile view.

Requirements: buttons should be side-by-side on regular/desktop view, and should stack on top of each other in iPhone/Android devices.

CodePen: https://codepen.io/anfperez/pen/joqoXG

Here's the code I have so far:

html

<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>

css (Bootstrap can be included)

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
}

.button-a {
  background-color: blue
}

.button-b {
  background-color: red;
}

When I try viewing the code in a mobile view, the red button button ends up overlapping on top of the blue button since they're both links. How can I get the red button to clear the blue button? I can't use Bootstrap's btn-group in this case.

Answer 1

You can use Flexbox inside a media query to stack the elements using flex-direction: column .

 .button-a, .button-b { background-color: blue; color: white; text-decoration: none; padding: 10px; } .button-a { background-color: blue } .button-b { background-color: red; } @media (max-width: 767px) { .wrapper { display: flex; flex-direction: column; align-items: flex-start; } } 

 <div class="wrapper"> <a class="button-a" href="www.google">Link that looks like button</a> <a class="button-b" href="www.amazon.com">Another link that looks like a button</a> </div> 

Answer 2

....really? you can making a have behaviour of div, if you want them to stack, just make the button class having inline-block

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
  margin: 20px;
  display:inline-block;
}

Edited Codepen This make the a link has the margin and padding behaviour like div. You just have to setting the width.. So if the media canvas shorter, the link will automatically stacking

Answer 3

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
  margin: 20px;
  display:block;
}

.button-a {
  background-color: blue
}

.button-b {
  background-color: red;
}