How do you make these buttons appear side by side rather than stacked?

Question

I've tried inline and inline-block, but it's not working. I've also tried setting a width and height for buttonsDiv in case not having one is somehow causing it to mess up.

I'm a little confused here, what is the way to get these buttons side by side rather than on top of each other?

https://codepen.io/hiarooo/pen/vYxYdOj

HTML

<div class="buttonsDiv">
  <h4><a href="#" class="fancyButton">Button 1</a></h4>
  <h4><a href="#" class="fancyButton">Button 2</a></h4>
</div>

CSS

/*FancyButtonStuff*/
.buttonsDiv{
  
}

.buttonContainer{
    margin-top:100px;
    text-align:center;
}

h4{
    color:rgba(69, 69, 69, 1);
    /*line-height:2em;*/
}

/* BUTTON CSS
------------------------------------------- */

a.fancyButton{
  display:inline-block;
    
    /*font:normal normal 300 1.3em 'Open Sans';*/
  font-size:0.8em;
    text-decoration:none;   
    
    color:rgba(28, 190, 131, 1);
    background-color:transparent;
    border:1px solid rgba(28, 190, 131, 1);
    border-radius:100px;
    
    padding: .3em 1.2em;
    margin:5px;
            
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}

a.fancyButton:hover{
    color:rgba(255, 255, 255, 1);
    background-color:rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}

score 4 · Accepted Answer · answered May 06 '21 at 08:08

Add this style

.buttonsDiv{
  display: flex;
}

/*FancyButtonStuff*/
.buttonsDiv{
  display: flex;
}

.buttonContainer{
    margin-top:100px;
    text-align:center;
}

h4{
    color:rgba(69, 69, 69, 1);
    /*line-height:2em;*/
}

/* BUTTON CSS
------------------------------------------- */

a.fancyButton{
  display:inline-block;
    
    /*font:normal normal 300 1.3em 'Open Sans';*/
  font-size:0.8em;
    text-decoration:none;   
    
    color:rgba(28, 190, 131, 1);
    background-color:transparent;
    border:1px solid rgba(28, 190, 131, 1);
    border-radius:100px;
    
    padding: .3em 1.2em;
    margin:5px;
            
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}

a.fancyButton:hover{
    color:rgba(255, 255, 255, 1);
    background-color:rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}


a.fancyButton2{
  display:inline-block;
    
    /*font:normal normal 300 1.3em 'Open Sans';*/
  font-size:0.8em;
    text-decoration:none;   
    
    color:rgba(28, 190, 131, 1);
    background-color:transparent;
    border:1px solid rgba(28, 190, 131, 1);
    border-radius:100px;
    
    padding: .3em 1.2em;
    margin:5px;
            
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}

a.fancyButton2:hover{
    color:rgba(255, 255, 255, 1);
    background-color:rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}

<div class="buttonsDiv">
  <h4><a href="#" class="fancyButton">Button 1</a></h4>
  <h4><a href="#" class="fancyButton">Button 2</a></h4>
</div>

score 2 · Answer 2 · answered May 06 '21 at 08:08

2

One way is to add display: inline-block to the h4 element like this:

h4{
    color:rgba(69, 69, 69, 1);
    /*line-height:2em;*/
    display: inline-block;
}

See demo here: Demo

answered May 06 '21 at 08:08

User7007

331
3
14

score 2 · Answer 3 · answered May 06 '21 at 08:16

2

to make the buttons appear side-by-side, you will have to change the display properties of the parent element to flex.

.buttonsDiv{ display:flex; }

You can refer to this article on CSS-Tricks for more information on Flexbox

answered May 06 '21 at 08:16

Sanchit Bajaj

35
4

score 2 · Answer 4 · answered May 06 '21 at 08:17

There are many ways to do that, but most people use this nowdays

Using flexbox, more about flexbox here

    .buttonsDiv {
      display: flex;
      flex-direction: row;
      /* set the gap with this */
      gap: 10px;
    }

Using Grid, more about grid here

.buttonsDiv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

score 1 · Answer 5 · answered May 06 '21 at 08:09

1

Add this in css file:

.buttonsDiv {
  display: flex;
}

answered May 06 '21 at 08:09

NeNaD

18,172
8
47
89

How do you make these buttons appear side by side rather than stacked?

5 Answers5