<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Ionic Template</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    
    <ion-header-bar  class="custom">
      <h1 class="title">{{myTitle}}</h1>
    </ion-header-bar>

    <ion-content class="center">
           <div class="row">
  <div class="col">
    <button class="button button-block button-energized">
      button-energized
    </button>
  </div>
</div>
    </ion-content>
    
<ion-footer-bar class="item-input-inset bar-positive">
  
    <label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
  
</ion-footer-bar>
    
  </body>
</html>

@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  src: local('Nothing You Could Do'), local('NothingYouCouldDo'), url(http://themes.googleusercontent.com/static/fonts/nothingyoucoulddo/v4/jpk1K3jbJoyoK0XKaSyQAXEXHkG8fPQqt_tcmM6oBg_3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}

html,
body {
  font-family: 'Nothing You Could Do', cursive !important;
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}


//Variables
$red: red; 

//Custom Bar Class
.custom{
  background-color:$red !important;
  border:solid!important;
  border-width:2px!important;
  border-color: darken($red, 10%)!important;
  
  .title{
    font-family: 'Nothing You Could Do';
      color:white !important;
      font-size:30px !important;
      font-weight:200 !important;
    }
  
}
.center{
  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
View Compiled 
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.myTitle = 'Template';
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.