diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
index 4469a49a0..0b869f341 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
@@ -6,6 +6,15 @@
         cursor:pointer;
     }
 
+    input[type=button], input[type=submit], button, .button{
+        padding:1em 0;
+        display:block;
+        width:100%;
+        text-align:left;
+        padding-left:1em;
+    }
+
+
     ul{
         @include unlist();
         background-color:$color-teal;
@@ -25,7 +34,6 @@
         }
 
         a{
-
             box-sizing:border-box;
             white-space: nowrap;
             position:relative;
@@ -55,7 +63,7 @@
         a, input[type=submit], input[type=reset], input[type=button], .button, button{
             font-size:0.95em;
             -webkit-font-smoothing: auto;
-            text-shadow:-1px -1px 1px rgba(0,0,0,0.2);
+            @include border-radius(0);
         }
 
         label{
@@ -95,16 +103,7 @@
         bottom:100%;
     }
 
-    input[type=button], input[type=submit], button{
-        padding:1em 0;
-        @include border-radius(0);
-        display:block;
-        width:100%;
-        text-align:left;
-        padding-left:1em;
-        text-shadow:-1px -1px 1px rgba(0,0,0,0.2);
-    }
-
+   
     .button{
         float:left;
 
@@ -132,6 +131,21 @@
     &.open > .button + .dropdown-toggle{
         background-color:$color-teal-darker;
     }
+
+    /* Styles for dropdowns which are also buttons e.g page editor */
+    &.dropdown-button{
+        .dropdown-toggle{
+            @include border-radius(0 3px 3px 0);
+        }
+        &.open{
+            > input[type=button], > input[type=submit], > button, > .button{
+                @include border-radius(0 0 3px 3px);
+            }
+            .dropdown-toggle{
+                @include border-radius(0 0 3px 0);
+            }
+        }
+    }
 }
 
 .dropdown.white{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index d4842874e..6997bd836 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -142,6 +142,7 @@ input[type=checkbox]:checked:before{
 
 /* Core button style */
 input[type=submit], input[type=reset], input[type=button], .button, button{
+    font-family:Open Sans,Arial,sans-serif;
     @include border-radius(3px);
     width:auto;
     padding:0.7em 1em;
@@ -160,6 +161,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     overflow:hidden;
     position:relative;
     font-weight:normal;
+    outline:none;
     -moz-appearance: none;
     -moz-box-sizing:content-box;
 
@@ -169,7 +171,6 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     }
 
     &.button-secondary{
-        border:1px solid $color-button;
         color:$color-button;
         background-color:white;
     }
@@ -257,6 +258,13 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     }
 }
 
+button.icon{
+    &:before,
+    &:after{
+        line-height:0;
+    }
+}
+
 .multiple{
     @include transition(max-height 10s ease);
     padding:0;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot
index cdce4afab..aaff14df5 100644
Binary files a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot and b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot differ
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg
index 82af03769..683157b11 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg
@@ -62,11 +62,11 @@
 <glyph unicode="&#85;" d="M218 63c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z m204-386c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z"/>
 <glyph unicode="&#51;" d="M332 426l0-94 49 0 0-98-192 0 0 55-152-102 152-101 0 54 286 0 0 286z"/>
 <glyph unicode="&#50;" d="M192 320l-192 0 149-109-54-179 153 107 168-107-69 179 165 109-192 0-72 184z"/>
-<glyph unicode="&#52;" d="M352 256c0-53-43-96-96-96-53 0-96 43-96 96 0 53 43 96 96 96 53 0 96-43 96-96z m-96 160c-160 0-256-159-256-159 0 0 96-161 256-161 160 0 256 160 256 160 0 0-96 160-256 160z m0-288c-140 0-216 128-216 128 0 0 76 128 216 128 140 0 216-128 216-128 0 0-76-128-216-128z"/>
 <glyph unicode="&#53;" d="M135 456l241 0 0-23-241 0z m270-177l-127-124 0 222-45 0 0-220-125 122-33-32 181-181 181 181z"/>
 <glyph unicode="&#54;" d="M136 456l241 0 0-23-241 0z m-28-302l126 124 0-222 45 0 0 220 126-122 32 32-181 181-181-181z"/>
 <glyph unicode="&#48;" d="M346 321c0-2 0-4 0-6 0-2-1-4-1-7 0-2-1-5-1-7-1-3-2-6-2-9-1-3-2-6-3-9-1-3-2-6-3-10-1-1-2-3-2-4-1-1-1-2-1-3-1-1-1-1-2-2-1-2-1-3-2-5-1-2-2-3-3-5l-2-2-1-3c-1-1-2-3-4-4-2-3-4-7-7-9-3-3-6-6-9-9l-4-4c-2-1-3-2-5-4-6-5-13-9-20-13-7-4-14-7-21-10-7-3-14-6-21-8-6-2-12-4-18-6-12-3-22-5-29-7-7-2-11-2-11-2 0 0 4 0 11 2 7 1 17 3 29 6 6 2 12 3 19 5 7 2 14 5 21 8 7 3 14 6 21 10 7 3 14 8 21 13 2 1 3 2 5 3l5 4c3 3 6 6 8 9 3 3 6 6 8 9 2 2 3 3 4 5l2 2c0 1 1 2 1 3 1 1 2 3 4 5 0 1 1 3 2 5 1 0 1 1 2 2 0 1 0 2 1 3 1 1 1 3 2 5 2 3 3 6 4 9 1 4 2 7 3 10 1 3 1 6 2 8 1 3 1 6 2 8 0 3 0 5 1 7 0 3 0 5 0 6 1 8 1 12 1 12l-6 0c0 0 0-4-1-11m112 80l-34 33c-1 33-22 55-32 61-10 9-33 16-59 13-25-4-61-17-86-64-49-92-154-289-155-291-1 0-1-1 0-1 0-1 1-1 1-1l40 7-78-151c0-1 0-1 1-2 0 0 0 0 1 0 0 0 0 0 0 0l56 10c0 0 1 0 1 1l41 120c105 1 178 26 218 77 42 54 36 122 29 154l-5 31 60 0c0 0 1 0 1 1 1 0 0 1 0 2m-55 42c0-5-5-10-10-10-6 0-10 5-10 10 0 6 4 11 10 11 5 0 10-5 10-11m-33-228c-40-50-112-75-216-75-1 0-1-1-1-2l-42-120-51-9 78 151c0 1 0 1 0 2-1 0-1 1-2 1l-40-8c14 26 109 202 154 287 25 46 59 59 83 62 25 3 46-3 56-10l0-22c-2 0-16 5-29 5-13 0-28-5-37-15-16-18-20-36-12-66 54 10 78-13 87-27 7-30 15-99-28-154m29 186l23 30 30-30z"/>
 <glyph unicode="&#63;" d="M253 492c65 0 120-22 167-67 46-45 70-100 72-165 0-65-22-121-68-167-45-47-100-71-165-73-65 0-121 22-167 68-47 45-71 100-72 165-1 65 21 121 67 167 46 47 101 71 166 72m-1-379c10 0 19 3 25 9 6 7 10 15 10 24 0 11-2 19-9 26-6 6-15 9-25 9 0 0-1 0-1 0-10 0-18-3-24-9-7-6-10-14-11-24 0-10 3-18 10-25 6-6 14-10 24-10 0 0 1 0 1 0m85 168c9 11 13 24 13 40 0 26-9 46-27 59-18 13-41 19-69 19-22 0-40-4-53-13-24-14-36-39-37-75 0 0 0-2 0-2 0 0 56 0 56 0 0 0 0 2 0 2 0 9 3 18 8 28 6 8 15 12 28 12 14 0 23-3 27-10 5-7 8-14 8-23 0-6-3-13-8-20-3-4-7-8-11-10 0 0-3-2-3-2-2-2-4-4-8-6-3-2-7-5-10-8-4-2-7-5-11-8-4-3-7-6-9-9-4-7-7-20-9-40 0 0 0-4 0-4 0 0 56 0 56 0 0 0 0 2 0 2 0 4 0 9 2 14 2 7 6 13 14 19 0 0 14 9 14 9 16 12 25 20 29 26"/>
 <glyph unicode="&#33;" d="M499 65c4-6 4-12 0-18-3-5-8-8-15-8 0 0-457 0-457 0-6 0-11 3-14 8-4 6-4 12-1 18 0 0 228 400 228 400 3 6 8 9 16 9 7 0 12-3 15-9 0 0 228-400 228-400m-215 25c0 0 0 51 0 51 0 0-56 0-56 0 0 0 0-51 0-51 0 0 56 0 56 0m0 89c0 0 0 154 0 154 0 0-56 0-56 0 0 0 0-154 0-154 0 0 56 0 56 0"/>
 <glyph unicode="&#57;" d="M256 512c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m-40-374l-117 118 45 45 72-73 154 154 45-45z"/>
+<glyph unicode="&#52;" d="M475 238c-29 45-65 78-108 101 11-20 17-42 17-65 0-35-13-65-38-90-25-25-55-38-90-38-35 0-65 13-90 38-25 25-38 55-38 90 0 23 6 45 17 65-43-23-79-56-108-101 25-39 57-70 95-94 38-23 79-34 124-34 45 0 86 11 124 34 38 24 70 55 95 94z m-205 109c0 4-2 7-4 10-3 3-6 4-10 4-24 0-44-8-61-25-17-17-26-38-26-62 0-4 1-7 4-9 3-3 6-4 10-4 4 0 7 1 10 4 2 2 4 5 4 9 0 17 5 31 17 42 12 12 26 18 42 18 4 0 7 1 10 4 2 2 4 6 4 9z m242-109c0-7-2-13-6-20-26-44-62-79-107-105-45-27-93-40-143-40-50 0-98 13-143 40-45 26-81 61-107 105-4 7-6 13-6 20 0 6 2 13 6 19 26 44 62 79 107 106 45 26 93 39 143 39 50 0 98-13 143-39 45-27 81-62 107-106 4-6 6-13 6-19z"/>
 </font></defs></svg>
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf
index 865f2f8b2..6dbe3411f 100644
Binary files a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf and b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf differ
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff
index cc36da3d4..c97931aa6 100644
Binary files a/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff and b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff differ
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index 165ce5a1e..e7fa55c7c 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -269,8 +269,8 @@
     }
 
     &.collapsible {
-        // li.collapsed gets its height from the fieldset only, which is now hidden
-        // and h2 has position:absolute which doesn't add to it either, so it would be 0 without this
+        /* li.collapsed gets its height from the fieldset only, which is now hidden
+        and h2 has position:absolute which doesn't add to it either, so it would be 0 without this */
         min-height: 41px;
 
         h2{
@@ -306,11 +306,34 @@
     }
 }
 
+footer .preview{
+    button, .button{
+        background-color:lighten($color-grey-2,10%);
+        border-color:lighten($color-grey-2,10%);
 
-/* styles applied to an element as it is being reordered */
-.preview{
-    padding-top:1em;
-    padding-bottom:0.5em;
+        &:hover{
+            background-color:$color-grey-2;
+            border-color:$color-grey-2;
+        }
+    }
+    .dropdown{
+        input[type=button], input[type=submit], button, .button{
+            background-color:lighten($color-grey-2,10%);
+            border-color:lighten($color-grey-2,10%);
+
+            &:hover{
+                background-color:$color-grey-2;
+                border-color:$color-grey-2;
+            }
+        }
+        ul, .dropdown-toggle{
+            background-color:lighten($color-grey-2,10%);
+        }
+        .dropdown-toggle:hover,
+        &.open > .button + .dropdown-toggle{
+            background-color:$color-grey-2;
+        }
+    }
 }
 
 @media screen and (min-width: $breakpoint-mobile){
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html
index d8d12a9be..2e671c82f 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html
@@ -1,4 +1,4 @@
-<input type="button" class="action-preview button"
+<button class="action-preview button"
     data-action="{% url 'wagtailadmin_pages_preview_on_create' content_type.app_label content_type.model parent_page.id %}{% if mode %}?mode={{ mode|urlencode }}{% endif %}"
     data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}"
     data-windowname="wagtail_preview_{{ parent_page.id }}_child" value="{{ label }}" />
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html
index 15f35245b..312bbe8d3 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html
@@ -1,4 +1,4 @@
-<input type="button" class="action-preview button"
+<button class="action-preview button icon icon-view"
     data-action="{% url 'wagtailadmin_pages_preview_on_edit' page.id %}{% if mode %}?mode={{ mode|urlencode }}{% endif %}"
     data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}"
-    data-windowname="wagtail_preview_{{ page.id }}" value="{{ label }}" />
+    data-windowname="wagtail_preview_{{ page.id }}">{{ label }}</button>
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html
index 11cb8a572..b39b11e41 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html
@@ -17,7 +17,7 @@
         <footer>
             <ul>
                 <li class="actions">
-                    <div class="dropdown dropup match-width">
+                    <div class="dropdown dropup button match-width">
                         <input type="submit" value="{% trans 'Save as draft' %}" class="button" />
                         <div class="dropdown-toggle icon icon-arrow-up"></div>
                         <ul role="menu">
@@ -32,7 +32,7 @@
                 <li class="actions">
                     {% trans 'Preview' as preview_label %}
                     {% if display_modes|length > 1 %}
-                        <div class="dropdown dropup match-width">
+                        <div class="dropdown dropup button match-width">
                             {% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label %}
                             <div class="dropdown-toggle icon icon-arrow-up"></div>
                             <ul role="menu">
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html
index 8a954ba49..53cebea2d 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html
@@ -34,7 +34,7 @@
         <footer>
             <ul>
                 <li class="actions">
-                    <div class="dropdown dropup match-width">
+                    <div class="dropdown dropup dropdown-button match-width">
                         <input type="submit" value="{% trans 'Save draft' %}" class="button" />
                         <div class="dropdown-toggle icon icon-arrow-up"></div>
                         <ul role="menu">
@@ -52,10 +52,10 @@
                     </div>
                 </li>
 
-                <li class="actions">
+                <li class="actions preview">
                     {% trans 'Preview' as preview_label %}
                     {% if display_modes|length > 1 %}
-                        <div class="dropdown dropup match-width">
+                        <div class="dropdown dropup dropdown-button match-width icon icon-view">
                             {% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label %}
                             <div class="dropdown-toggle icon icon-arrow-up"></div>
                             <ul role="menu">