Buttons!

public/templates/partials/playlist-dialog.html

@@ -31,13 +31,13 @@
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary" ng-disabled="isLoading">
+                    <button type="submit" class="btn btn-flat btn-primary" ng-disabled="isLoading">
                         <span ng-show="isNew">Create</span>
                         <span ng-hide="isNew">Edit</span>
                         Playlist
                         <i class="ui-icon-gear fa-spin" ng-show="isLoading"></i>
                     </button>
-                    <a class="btn btn-default" ng-click="$hide()" ng-disabled="isLoading">Close</a>
+                    <a class="btn btn-flat btn-default" ng-click="$hide()" ng-disabled="isLoading">Close</a>
                 </div>
             </form>
         </div>

resources/assets/styles/components/components.less

@@ -51,6 +51,12 @@
       margin: 0px;
     }
 
+    > .btn {
+      text-transform: initial;
+      box-shadow: 0 0 0 transparent !important;
+      transition: background-color 0.3s @swift-ease-in-out;
+    }
+
     &.has-filter {
       > .btn {
         background: @pfm-purple;
@@ -216,13 +222,39 @@ ui-view {
 
 html body {
   .btn {
-    .border-radius(0px);
+    .material-shadow(1);
+    .border-radius(3px);
+    border:0;
+    transition: all 0.3s @swift-ease-in-out;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+    outline: 0;
+
+    &:hover {
+      .material-shadow(2);
+    }
+
+    &.btn-flat {
+      box-shadow: 0 0 0 transparent !important;
+    }
   }
 
   .btn.btn-primary, .add-btn, .btn-success {
     background: @pfm-purple;
     border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
     color: #fff;
+    &:hover {
+      background-color: darken(@pfm-purple, 15%);
+    }
+
+    &.btn-flat {
+      background-color: transparent;
+      color: @pfm-purple;
+      &:hover {
+        background-color: lighten(@pfm-purple, 30%);
+        color: darken(@pfm-purple, 15%);
+      }
+    }
   }
 
   .btn-success.disabled {

resources/assets/styles/layout.less

@@ -309,3 +309,27 @@ header {
 .playlist-form .modal-footer {
     margin-top: 20px;
 }
+
+.modal-content {
+  .material-shadow(3);
+  border: 0;
+  border-radius: 2px;
+}
+
+.modal-header {
+  border-bottom: 0;
+  padding: 15px 20px;
+  h4 {
+    margin-bottom: 0;
+    font-weight: 700;
+  }
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.modal-footer {
+  padding: 20px;
+  border-top: 0;
+}