How do I put a button and a set of buttons next to each other in HTML/CSS?

Question

I've a login page that contains of sign in fields (email/password) and sign in buttons.

Initial look

I want the buttons New account and Forgot password to be next to the button Login, but still above each other like this

This is my code Fiddle

page-login {
  background-size: 100%;
  background-position-y: 50%;
  .logo {
    display: block;
    width: 1050px;
    margin-left: auto;
    margin-right: auto
  }
  button {
    padding: 10px;
    margin: 7px;
    border: none;
  }
  .facebook-btn,
  .google-btn {
    display: block;
    clear: both;
    border: none;
    background: #939393;
  }
  #btn button {
    padding: 3px;
    display: block;
    clear: both;
    background-color: Transparent;
    color: black;
  }
  #btn {
    overflow: hidden;
  }
  .norm-login-textfield {
    display: block;
    text-align: center;
    margin: auto;
    width: 50%;
    margin-bottom: 5px;
    height: 5%;
  }
  .norm-login-field {
    display: block;
    margin: auto;
    width: 55%;
    margin-bottom: 5px;
    height: 5%;
  }
  .icons {
    margin-right: 10px;
  }
  .error {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    background-color: rgb(217, 74, 87);
    p {
      color: white;
      font-weight: bold;
    }
  }
  .invalid {
    border-bottom: 1px solid #FF6153;
  }
  ion-input {
    padding: 5px;
  }
}

<ion-content padding>
  <form [formGroup]="loginForm" (submit)="loginUser()" novalidate>

    <ion-item>
      <ion-input formControlName="email" type="email" placeholder="Email address" [class.invalid]="!loginForm.controls.email.valid && loginForm.controls.email.dirty"></ion-input>
      <ion-icon name="ios-mail-outline" item-left></ion-icon>
    </ion-item>
    <ion-item class="error-message" *ngIf="!loginForm.controls.email.valid  && loginForm.controls.email.dirty">
      <p>Please enter a valid email.</p>
    </ion-item>

    <ion-item>
      <ion-input formControlName="password" type="password" placeholder="Password" [class.invalid]="!loginForm.controls.password.valid && loginForm.controls.password.dirty"></ion-input>
      <ion-icon name="ios-key-outline" item-left></ion-icon>
    </ion-item>
    <ion-item class="error-message" *ngIf="!loginForm.controls.password.valid  && loginForm.controls.password.dirty">
      <p>Your password needs more than 6 characters.</p>
    </ion-item>

    <button ion-button block type="submit" [disabled]="!loginForm.valid" style="margin:0 auto;width:100px;height:100px;">
              Login
            </button>

  </form>
  <div id="btn">
    <button ion-button clear (click)="goToSignup()" style="margin:0 auto;">
            New account
          </button>

    <button ion-button clear (click)="goToResetPassword()" style="margin:0 auto;">
            Forgot password
          </button>
  </div>

  <button ion-button block class="facebook-btn" (click)="facebookLogin()">
             <ion-icon name="logo-facebook" class="icons"> </ion-icon>
              Login with Facebook</button>

  <button ion-button block class="google-btn" (click)="googleLogin()">
             <ion-icon name="logo-google" class="icons"></ion-icon>
              Login with Google</button>


</ion-content>

Answer 1

Try below code

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: "templates/login.html",
      controller: "LoginCtrl"
    })
  
    $urlRouterProvider.otherwise('/login');
})

.controller('LoginCtrl', function($scope) {
  $scope.user = {};

        $scope.login = function (user) {
            console.log('Logging In', user);
        };
})

page-login {
  background-size: 100%;
  background-position-y: 50%;
  .logo {
    display: block;
    width: 1050px;
    margin-left: auto;
    margin-right: auto
  }
  button {
    padding: 10px;
    margin: 7px;
    border: none;
  }
  .facebook-btn,
  .google-btn {
    display: block;
    clear: both;
    border: none;
    background: #939393;
  }
  #btn button {
    padding: 3px;
    display: block;
    clear: both;
    background-color: Transparent;
    color: black;
  }
  #btn {
    overflow: hidden;
  }
  .norm-login-textfield {
    display: block;
    text-align: center;
    margin: auto;
    width: 50%;
    margin-bottom: 5px;
    height: 5%;
  }
  .norm-login-field {
    display: block;
    margin: auto;
    width: 55%;
    margin-bottom: 5px;
    height: 5%;
  }
  .icons {
    margin-right: 10px;
  }
  .error {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    background-color: rgb(217, 74, 87);
    p {
      color: white;
      font-weight: bold;
    }
  }
  .invalid {
    border-bottom: 1px solid #FF6153;
  }
  ion-input {
    padding: 5px;
  }
}
form,div#btn {
    display: inline-block;
}
#btn button,button.google-btn,button.facebook-btn {
    display: block;
}
ion-content.scroll-content.ionic-scroll.scroll-content-false {
    width: 300px;
    margin: 0 auto;
}
#btn button, button.google-btn, button.facebook-btn {
    display: block;
    background: none;
    box-shadow: none;
    border: none;
    line-height: 14px;
}
form, div#btn {
    display: inline-block;
    padding: 10px;
    vertical-align: sub;
}
button.button.button-block.button-outline.button-positive {
    background: orange;
    border: none;
    color: #fff;
}
.padding.login {
    width: 150px;
    display: inline-block;
    vertical-align: middle;
}

<html ng-app="ionicApp"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>
    </head>
<body ng-app="ionicApp" class="grade-a platform-browser platform-win32 platform-ready">
    

  
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Login Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
  

  
    <ion-nav-view class="view-container" nav-view-transition="ios" nav-view-direction="none"><ion-view class="pane" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
    <ion-content scroll="false" class="scroll-content ionic-scroll scroll-content-false">
        <form ng-submit="login(user)" class="ng-pristine ng-valid ng-valid-email ng-submitted">
            <div class="list">
                <label class="item item-input">
                    <i class="icon ion-email placeholder-icon"></i>
                    <input type="email" placeholder="Email" ng-model="user.email" class="ng-pristine ng-untouched ng-valid ng-valid-email">
                </label>
                <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="password">
  </label>
            </div>
            <div class="padding login">
                <button type="submit" class="button button-block button-outline button-positive">
                    <i class="icon"></i>
                    Log in
                </button>
            </div><div id="btn">
    <button ion-button="" clear="" (click)="goToSignup()">
            New account
          </button>

    <button ion-button="" clear="" (click)="goToResetPassword()">
            Forgot password
          </button>
  </div>
        </form>
        

    </ion-content>
</ion-view></ion-nav-view>
  
  
  <script id="templates/login.html" type="text/ng-template">
    <ion-view title="Login">
    <ion-content scroll="false">
        <form ng-submit="login(user)">
            <div class="list">
                <label class="item item-input">
                    <i class="icon ion-email placeholder-icon"></i>
                    <input type="email" placeholder="Email" ng-model="user.email">
                </label>
                <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
            </div>
            <div class="padding login">
                <button type="submit" class="button button-block button-outline button-positive">
                    <i class="icon"></i>
                    Log in
                </button>
            </div>
        </form>
        <div id="btn">
    <button ion-button clear (click)="goToSignup()">
            New account
          </button>

    <button ion-button clear (click)="goToResetPassword()" >
            Forgot password
          </button>
  </div>

    </ion-content>
</ion-view>

</body></html>

Answer 2

Place all three of the buttons in a div with:

margin:0 auto; width:200px;

Give the buttons the following styles:

1st button:

float:left; width:100px; height:100px;

2nd + 3rd buttons:

float:right; width:100px; // or fewer pixels - adjust to fit padding/margins

Answer 3

To have them together and centered place them in a div and give it the

margin: 0 auto;

then give the login button an id (eg. #login-button) and use

display: inline-block;

on both #login-button and #btn