Angular Material Layout

by Kai_Draord

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="sandbox">
  <md-button class="card vcenter"><md-button class="md-raised md-warn">Ink effect</md-button></md-button>
  
  <hr>
  
  <md-button class="card"></md-button>
</div>

CSS

main {
    background: ivory;
}
img {
    max-width:100%;
    width:100%;
}
.card:hover{
    background-color:white !important;
 }
.card{
  box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin: 8px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    height:300px;
    width:500px;
    background-color:white;
 }
 .vcenter{
   display:flex;
   align-items:center;
   justify-content:center;
 }

JavaScript

angular.module('sandbox', ['ngMaterial']);