-2

I'm making a website for my school and I'm trying to have 2 buttons next to each other.

screenshot here

.example_e {
    border: none;
    width: 50%;
    background: #404040;
    color: #ffffff !important;
    font-weight: 100;
    padding: 20px;
    text-transform: uppercase;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.example_e:hover {
    color: #404040 !important;
    font-weight: 700 !important;
    letter-spacing: 3px;
    background: none;
    -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    transition: all 0.3s ease 0s;
}
<div class="button_cont" align="left">
  <a class="example_e" href="add-website-here" target="_blank" rel="nofollow noopener">
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Map to boys campus
  </a>
</div>
<div class="button_cont" align="right">
  <a class="example_e" href="add-website-here" target="_blank" rel="nofollow noopener">
    Map to girls campus&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
  </a>
</div>
Woodrow Barlow
  • 8,477
  • 3
  • 48
  • 86
alnesef2002
  • 77
  • 1
  • 6
  • It's a little hard to know exactly what you mean by 'next to each other'. Looking at the demo, there seems to be more than one thing that's not quite right. For example, it's not a good idea to change the font weight and letter spacing on hover. Is that the effect you are going for? – Richard Hunter Oct 03 '20 at 16:12

1 Answers1

1

Both elements must be inside of the same div or parent. Then add display: flex; to the parent.

.main {
display: flex;
}

.example_e {
    border: none;

    background: #404040;
    color: #ffffff !important;
    font-weight: 100;
    padding: 20px;
    text-transform: uppercase;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.example_e:hover {
    color: #404040 !important;
    font-weight: 700 !important;
    letter-spacing: 3px;
    background: none;
    -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    transition: all 0.3s ease 0s;
}
<div class="main">
<div class="button_cont" align="left"><a class="example_e" href="add-website-here" target="_blank" rel="nofollow noopener">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Map to boys campus</a></div>
<div class="button_cont" align="right"><a class="example_e" href="add-website-here" target="_blank" rel="nofollow noopener">Map to girls campus&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</a></div>
</div>
Jaocampooo
  • 482
  • 3
  • 10