Create two buttons without space in between them

Question

I need two "flat" buttons, without space between them. It should look like this:

Page itself is in AngularJS. So far I've created this (just snippet):

HTML:

  <body ng-app="">
    <section layout="row" layout-align="center center">
      <button id="legal" ng-click="businessType=true" ng-model="businessType" ng-init="businessType = true">Legal Person</button>
      <button id="individual" ng-click="businessType=false">Individual</button>
    </section>

    <p>Area 1 - common data</p>
    <hr>

    <div ng-if="businessType == true">
      <p>Area 2 - legal person data</p>
    </div>

    <div ng-if="businessType == false">
      <p>Area 2 - individual data</p>
    </div>

    <hr>
    <p>Area 3 - common data</p>
    <hr>
  </body>

</html>

CSS:

button#legal:focus {
  background: blue;
  color: white;
}

button#individual:focus {
  background: blue;
  color: white;
}

JSFiddle

which looks (initially and when option selected) like:

I've tried several options, with AngularJS Material button etc., but none produced desired effect, i.e. buttons which looks like example on mockup ('flat' like, no space).

Any help with this, please?

Temani Afif · Accepted Answer · 2018-02-10T12:19:01.770

3

You can try these styles (as you have to override some default styles) and don't forget to remove whitespace between buttons (here I simply made them close to each other). You can also consider the autofocus attribute to have the focus at the start.

button {
  border: none;
  outline: none;
  padding: 10px 20px;
}

button#legal:focus,
button#individual:focus {
  background: blue;
  color: white;
}

<section>
  <button id="legal" autofocus >Legal Person</button><button id="individual">Individual</button>
</section>

edited Feb 10 '18 at 12:19

answered Feb 10 '18 at 11:50

Temani Afif

245,468
26
309
415

Thanks! One more question, how do I 'set' focus on 'Legal Person' as this is going to be preselected? Would you add that to your answer, please? – Nenad Bulatović Feb 10 '18 at 12:16
1

@NenadBulatovic added ;) simply use autofocus – Temani Afif Feb 10 '18 at 12:19
Thanks, so simple, yet effective! – Nenad Bulatović Feb 10 '18 at 12:22

score 2 · Answer 2 · answered Feb 10 '18 at 12:49

It's 2018! Wrap them inside an element with display: inline-flex or display: flex.

.button-container {
  display: inline-flex;
}

<div class="button-container">
  <button type="button">Button1</button>
  <button type="button">Button2</button>
  <button type="button">Button3</button>
</div>

Bhuwan · Answer 3 · 2018-02-10T11:49:19.450

Because buttons are by default inline elements which take space to align itself.

So use flex to the button row which will make the button flex item. Also remove the outline of the button

Stack Snippet

button#legal:focus {
  background: blue;
  color: white;
}

button#individual:focus {
  background: blue;
  color: white;
}

section[layout="row"] {
  display: flex;
}

button {
  outline: none;
}

<body ng-app="">
  <section layout="row" layout-align="center center">
    <button id="legal" ng-click="businessType=true" ng-model="businessType" ng-init="businessType = true">Legal Person</button>
    <button id="individual" ng-click="businessType=false">Individual</button>
  </section>

  <p>Area 1 - common data</p>
  <hr>

  <div ng-if="businessType == true">
    <p>Area 2 - legal person data</p>
  </div>

  <div ng-if="businessType == false">
    <p>Area 2 - individual data</p>
  </div>

  <hr>
  <p>Area 3 - common data</p>
  <hr>
</body>

i think we should at least mention that he is facing whitespace issue which can be fixed with flex — Temani Afif, Feb 10 '18 at 11:48

Create two buttons without space in between them

3 Answers3