diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index 3d5fcef..5de1ccf 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -197,10 +197,8 @@ drupal.dropbutton:
   js:
     misc/dropbutton/dropbutton.js: {}
   css:
-    component:
-      misc/dropbutton/dropbutton.css: {}
     theme:
-      misc/dropbutton/dropbutton.theme.css: {}
+      misc/dropbutton/dropbutton.css: {}
   dependencies:
     - core/jquery
     - core/drupal
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index b1a911a..341221a 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1678,7 +1678,7 @@ function drupal_common_theme() {
       'variables' => array('links' => array(), 'attributes' => array('class' => array('links')), 'heading' => array(), 'set_active_class' => FALSE),
     ),
     'dropbutton_wrapper' => array(
-      'variables' => array('children' => NULL),
+      'variables' => array('attributes' => array(), 'children' => NULL),
     ),
     'image' => array(
       // HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft
diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css
index c2e6820..308a2d8 100644
--- a/core/misc/dropbutton/dropbutton.css
+++ b/core/misc/dropbutton/dropbutton.css
@@ -1,133 +1,75 @@
-
 /**
  * @file
- * Base styles for dropbuttons.
+ * Dropbutton styling.
+ *
+ * A dropbutton is a widget that displays a list of action links as a button
+ * with a primary action. Secondary actions are hidden in a dropdown menu.
+ *
  */
 
 /**
- * When a dropbutton has only one option, it is simply a button.
+ * The button class is added when there is only one action. This should be moved
+ * to button.css
  */
-.dropbutton,
-.dropbutton div {
-  box-sizing: border-box;
-}
-.js .dropbutton {
-  position: relative;
-  display: block;
-  float: left;
-}
-
-@media screen and (max-width:600px) {
-  .js .dropbutton {
-    width: 100%;
-  }
-}
-
-/* Splitbuttons */
-@media screen and (min-width:600px) {
-  .form-actions .dropbutton {
-    float: left; /* LTR */
-  }
-  [dir="rtl"] .form-actions .dropbutton {
-    float: right;
-  }
-}
-.js .form-actions .dropbutton {
-  position: static;
-}
-.js td .dropbutton {
-  min-height: 2em;
-}
-.js td .dropbutton--multiple {
-  max-width: 100%;
-}
-.js td .dropbutton--multiple .dropbutton__action {
-  width: auto;
-}
-
-/* UL styles are over-scoped in core, so this selector needs weight parity. */
-.js .dropbutton .dropbutton__menu {
-  /* Positioning declarations */
-  position: absolute;
-  top: 2em;
-  /* Box model declarations */
-  display: none;
-  margin: 5px 0;
-  min-width: 100%;
-  padding: 5px 0;
-  /* Other declarations */
-  background: #fff;
-  border: 1px solid #a6a6a6;
-  border-radius: 5px;
-  list-style-image: none;
-  list-style-type: none;
-  overflow: hidden;
-}
-
-.dropbutton--multiple.is-open .dropbutton__menu {
-  display: block;
-}
-
-.js .dropbutton__menu li,
-.js .dropbutton__menu .dropbutton__action {
-  display: block;
-  outline: none;
+.button {
+  background: #FFF;
+  color: #333;
+  border: 1px solid #BBB;
+  padding: 0.4em 1em;
+  border-radius: 20em;
+  text-decoration: none;
 }
-
-.js .dropbutton__menu li:hover,
-.js .dropbutton__menu li:focus,
-.js .dropbutton__menu a:hover,
-.js .dropbutton__menu a:focus {
-  outline: initial;
+.button:hover {
+  background-color: #EFEFEF;
 }
 
 /**
- * The dropbutton styling.
- *
- * A dropbutton is a widget that displays a list of action links as a button
- * with a primary action. Secondary actions are hidden behind a click on a
- * twisty arrow.
- *
- * The arrow is created using border on a zero-width, zero-height span.
- * The arrow inherits the link color, but can be overridden with border colors.
+ * The dropbutton class is added with Javascript when there is more than one
+ * action.
  */
-.js .dropbutton--multiple {
+.dropbutton {
+  position: relative;
+  display: inline-block;
   padding-right: 2em; /* LTR */
 }
-[dir="rtl"].js .dropbutton--multiple {
+[dir="rtl"] .dropbutton {
   padding-left: 2em;
   padding-right: 0;
 }
-.dropbutton--multiple.is-open {
+@media screen and (max-width:600px) {
+  .dropbutton {
+    width: 100%;
+  }
+}
+.dropbutton.is-open {
   max-width: none;
   z-index: 100;
 }
-.dropbutton--multiple .dropbutton__menu .dropbutton__action {
-  padding: 0.35em 1em;
-  color: #262626;
-  text-decoration: none;
-}
 
-.dropbutton--multiple .dropbutton__menu .dropbutton__action:focus,
-.dropbutton--multiple .dropbutton__menu .dropbutton__action:hover {
-  background: #c8ecfe;
+/* The primary action, always visible. */
+.dropbutton__primary-action {
+  padding-left: 1em;
+  display: block;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  color: #333;
+  border-right: 0;
 }
 
+/* The dropbutton trigger toggles the hidden menu. */
 .dropbutton__trigger {
-  /* Positioning declarations */
+  position: absolute;
+  margin: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  top: 0;
   bottom: 0;
   right: 0; /* LTR */
-  top: 0;
-  /* Box model declarations */
   display: block;
   height: auto;
-  margin: 0;
-  padding: 0;
   width: 2em;
-  /* Other declarations */
   cursor: pointer;
-  text-indent: 110%;
-  white-space: nowrap;
+  background: url(../icons/333333/caret-down.svg) no-repeat center center;
 }
 [dir="rtl"] .dropbutton__trigger {
   left: 0;
@@ -137,54 +79,40 @@
 .dropbutton__trigger:focus {
   outline: initial;
 }
-.dropbutton__trigger:after {
-  /* Positioning declarations */
+
+/* The dropbutton menu contains the hidden action items. */
+.dropbutton__menu {
   position: absolute;
-  right: 40%; /* 0.6667em; */ /* LTR */
-  top: 50%;
-  /* Box model declarations */
-  content: "";
-  display: block;
-  height: 0;
-  line-height: 0;
-  margin-top: -0.1666em;
-  width: 0;
-  /* Other declarations */
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-style: solid;
-  border-width: 0.3333em 0.3333em 0;
+  top: 2em;
+  display: none;
+  min-width: 150px;
+  margin: 5px 0;
+  min-width: 100%;
+  padding: 5px 0;
+  background: #fff;
+  border: 1px solid #a6a6a6;
+  border-radius: 5px;
+  list-style-image: none;
+  list-style-type: none;
   overflow: hidden;
 }
-[dir="rtl"] .dropbutton__trigger:after {
-  left: 0.6667em;
-  right: auto;
+.dropbutton.is-open .dropbutton__menu {
+  display: block;
 }
-.dropbutton--multiple.is-open .dropbutton__trigger:after {
-  top: 0.6667em;
-  border-bottom: 0.3333em solid;
-  border-top-color: transparent;
+.dropbutton__menu li,
+.dropbutton__menu-item {
+  display: block;
+  outline: none;
 }
-.dropbutton--multiple .button.dropbutton__action {
-  /* Box model declarations */
-  padding-left: 1em;
-  float: left;
-  /* Other declarations */
-  border-radius: 0;
-  border-top-left-radius: 20em;
-  border-bottom-left-radius: 20em;
-  font-size: 0.825rem;
+
+.dropbutton__menu-item {
+  padding: 0.35em 1em;
+  color: #262626;
+  text-decoration: none;
 }
-.dropbutton .button.dropbutton__trigger {
-  /* Positioning declarations */
-  position: absolute;
-  /* Box model declarations */
-  padding-right: 1em;
-  float: left;
-  margin-left: -1px;
-  /* Other declarations */
-  border-radius: 0;
-  border-top-right-radius: 20em;
-  border-bottom-right-radius: 20em;
+.dropbutton__menu-item:focus,
+.dropbutton__menu-item:hover {
+  background: #c8ecfe;
+  outline: initial;
 }
+
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index 2e61208..7bcd17c 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -14,7 +14,7 @@
    */
   Drupal.behaviors.dropButton = {
     attach: function (context, settings) {
-      var $dropbuttons = $(context).find('.dropbutton').once('dropbutton__menu');
+      var $dropbuttons = $(context).find('.js-dropbutton').once('dropbutton__menu');
       if ($dropbuttons.length) {
         // Adds the delegated handler that will toggle dropdowns on click.
         var $body = $('body').once('dropbutton-click');
@@ -39,7 +39,7 @@
    */
   function dropbuttonClickHandler(e) {
     e.preventDefault();
-    $(e.target).closest('.dropbutton').toggleClass('is-open');
+    $(e.target).closest('.js-dropbutton').toggleClass('is-open');
   }
 
   /**
@@ -84,17 +84,17 @@
       // Identify the first element of the collection.
       var $primary = this.$actions.slice(0, 1).find('a');
       // Remove parent <li> for first dropbutton action and move.
-      $primary.unwrap().addClass('button dropbutton__action').each(function() {
+      $primary.unwrap().addClass('button dropbutton__primary-action').each(function() {
         $(this).parent().before(this);
       });
       // Identify the secondary actions.
       var $secondary = this.$actions.slice(1).find('a');
-      $secondary.addClass('dropbutton__action');
+      $secondary.addClass('dropbutton__menu-item');
       // Add toggle link.
       $primary.after(Drupal.theme('dropbuttonToggle', options));
       // Bind mouse events.
       this.$dropbutton
-        .addClass('dropbutton--multiple')
+        .addClass('dropbutton')
         .on({
 
           /**
@@ -125,10 +125,9 @@
         });
     }
     else {
-      // @todo Route through button theming.
-      this.$dropbutton.addClass('dropbutton--single');
+      // If there's only one action, add a button class.
       var $action = this.$actions.slice(0, 1).find('a');
-      $action.unwrap().unwrap().addClass('button dropbutton__action');
+      $action.unwrap().unwrap().addClass('button');
     }
   }
 
diff --git a/core/misc/dropbutton/dropbutton.theme.css b/core/misc/dropbutton/dropbutton.theme.css
deleted file mode 100644
index 65f2568..0000000
--- a/core/misc/dropbutton/dropbutton.theme.css
+++ /dev/null
@@ -1,34 +0,0 @@
-
-/**
- * @file
- * General styles for dropbuttons.
- */
-
-.js .dropbutton-widget {
-  background-color: white;
-  border: 1px solid #cccccc;
-}
-.js .dropbutton-widget:hover {
-  border-color: #b8b8b8;
-}
-.dropbutton .dropbutton-action > * {
-  padding: 0.1em 0.5em;
-  white-space: nowrap;
-}
-.dropbutton .secondary-action {
-  border-top: 1px solid #e8e8e8;
-}
-.dropbutton-multiple .dropbutton {
-  border-right: 1px solid #e8e8e8; /* LTR */
-}
-[dir="rtl"] .dropbutton-multiple .dropbutton {
-  border-left: 1px solid #e8e8e8;
-  border-right: 0 none;
-}
-.dropbutton-multiple .dropbutton .dropbutton-action > * {
-  margin-right: 0.25em; /* LTR */
-}
-[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
-  margin-left: 0.25em;
-  margin-right: 0;
-}
diff --git a/core/modules/node/src/Tests/AssertButtonsTrait.php b/core/modules/node/src/Tests/AssertButtonsTrait.php
index 8742f94..403c40b 100644
--- a/core/modules/node/src/Tests/AssertButtonsTrait.php
+++ b/core/modules/node/src/Tests/AssertButtonsTrait.php
@@ -35,7 +35,7 @@ public function assertButtons($buttons, $dropbutton = TRUE) {
       $this->assertTrue(empty($save_button));
 
       // Dropbutton elements.
-      $elements = $this->xpath('//div[@class="dropbutton"]//input[@type="submit"]');
+      $elements = $this->xpath('//div[@class="js-dropbutton"]//input[@type="submit"]');
       $this->assertEqual($count, count($elements));
       foreach ($elements as $element) {
         $value = isset($element['value']) ? (string) $element['value'] : '';
@@ -46,7 +46,7 @@ public function assertButtons($buttons, $dropbutton = TRUE) {
     else {
       // Assert there is a save button.
       $this->assertTrue(!empty($save_button));
-      $this->assertNoRaw('dropbutton');
+      $this->assertNoRaw('js-dropbutton');
     }
   }
 }
diff --git a/core/modules/system/templates/dropbutton-wrapper.html.twig b/core/modules/system/templates/dropbutton-wrapper.html.twig
index b07aa29..e5f4941 100644
--- a/core/modules/system/templates/dropbutton-wrapper.html.twig
+++ b/core/modules/system/templates/dropbutton-wrapper.html.twig
@@ -14,7 +14,7 @@
 #}
 {% if children %}
   {% spaceless %}
-    <div class="dropbutton">
+    <div class="js-dropbutton">
       {{ children }}
     </div>
   {% endspaceless %}
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 6e7f1e0..5208bd5 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -18,95 +18,6 @@
 .box-margin {
   margin: 12px 12px 0 12px;
 }
-.views-admin .icon {
-  height: 16px;
-  width: 16px;
-}
-.views-admin .icon,
-.views-admin .icon-text {
-  background-attachment: scroll;
-  background-image: url(../images/sprites.png);
-  background-position: left top; /* LTR */
-  background-repeat: no-repeat;
-}
-[dir="rtl"] .views-admin .icon,
-[dir="rtl"] .views-admin .icon-text {
-  background-position: right top;
-}
-.views-admin a.icon {
-  background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
-}
-.views-admin a.icon:hover {
-  border-color: #d0d0d0;
-  box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
-}
-.views-admin a.icon:active {
-  border-color: #c0c0c0;
-}
-.views-admin span.icon {
-  float: left; /* LTR */
-  position: relative;
-}
-[dir="rtl"] .views-admin span.icon {
-  float: right;
-}
-.views-admin .icon.compact {
-  display: block;
-  overflow: hidden;
-  direction: ltr;
-  text-indent: -9999px;
-}
-
-/* Targets any element with an icon -> text combo */
-.views-admin .icon-text {
-  padding-left: 19px; /* LTR */
-}
-[dir="rtl"] .views-admin .icon-text {
-  padding-left: 0;
-  padding-right: 19px;
-}
-.views-admin .icon.linked {
-  background-position: center -153px;
-}
-.views-admin .icon.unlinked {
-  background-position: center -195px;
-}
-.views-admin .icon.add {
-  background-position: center 3px;
-}
-.views-admin a.icon.add {
-  background-position: center 3px, left top; /* LTR */
-}
-[dir="rtl"] .views-admin a.icon.add {
-  background-position: center 3px, right top;
-}
-.views-admin .icon.delete {
-  background-position: center -52px;
-}
-.views-admin a.icon.delete {
-  background-position: center -52px, left top; /* LTR */
-}
-[dir="rtl"] .views-admin a.icon.delete {
-  background-position: center -52px, right top;
-}
-.views-admin .icon.rearrange {
-  background-position: center -111px;
-}
-.views-admin a.icon.rearrange {
-  background-position: center -111px, left top; /* LTR */
-}
-[dir="rtl"] .views-admin a.icon.rearrange {
-  background-position: center -111px, right top;
-}
-.views-displays .tabs a:hover > .icon.add {
-  background-position: center -25px;
-}
-.views-displays .tabs .open a:hover > .icon.add {
-  background-position: center 3px;
-}
 details.box-padding {
   border: none;
 }
@@ -748,64 +659,54 @@ td.group-title {
   margin-bottom: 18px;
   line-height: 1.4555;
 }
-.dropbutton-multiple {
+
+/* Dropbutton overrides. */
+.dropbutton {
   position: absolute;
 }
-.dropbutton-widget {
-  position: relative;
-}
-.js .views-edit-view .dropbutton-wrapper .dropbutton .dropbutton-action > * {
+.views-edit-view .dropbutton__menu-item > * {
   font-size: 10px;
 }
-.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
+.dropbutton__menu-item > .ajax-progress-throbber {
   position: absolute;
   right: -5px; /* LTR */
   top: -1px;
   z-index: 2;
 }
-[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber {
+[dir="rtl"] .dropbutton__menu-item > .ajax-progress-throbber {
   left: -5px;
   right: auto;
 }
-.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
-  border-radius: 1.1em 0 0 0; /* LTR */
-}
-[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
-  border-radius: 0 1.1em 0 0;
-}
-.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
-  border-radius: 0 0 0 1.1em; /* LTR */
-}
-[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
-  border-radius: 0 0 1.1em 0;
-}
-.views-display-top .dropbutton-wrapper {
+
+/* Add a separate class here. */
+.views-display-top .dropbutton {
   position: absolute;
   right: 12px; /* LTR */
   top: 7px;
 }
-[dir="rtl"] .views-display-top .dropbutton-wrapper {
+[dir="rtl"] .views-display-top .dropbutton {
   left: 12px;
   right: auto;
 }
-.views-display-top .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {
+.views-display-top .dropbutton-action a {
   width: auto;
 }
 
-.views-ui-display-tab-bucket .dropbutton-wrapper {
+.views-ui-display-tab-bucket .dropbutton {
   position: absolute;
   right: 5px; /* LTR */
   top: 4px;
+  font-size: small;
 }
-[dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper {
+[dir="rtl"] .views-ui-display-tab-bucket .dropbutton {
   left: 5px;
   right: auto;
 }
-.views-ui-display-tab-bucket .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {
+.views-ui-display-tab-bucket .dropbutton-widget .dropbutton-action a {
   width: auto;
 }
-.views-ui-display-tab-actions .dropbutton-wrapper li a,
-.views-ui-display-tab-actions .dropbutton-wrapper input {
+.views-ui-display-tab-actions .dropbutton li a,
+.views-ui-display-tab-actions .dropbutton input {
   background: none;
   border: medium;
   font-family: inherit;
@@ -813,12 +714,12 @@ td.group-title {
   padding-left: 12px; /* LTR */
   margin-bottom: 0;
 }
-[dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper li a,
-[dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper input {
+[dir="rtl"] .views-ui-display-tab-actions .dropbutton li a,
+[dir="rtl"] .views-ui-display-tab-actions .dropbutton input {
   padding-left: 0.5em;
   padding-right: 12px;
 }
-.views-ui-display-tab-actions .dropbutton-wrapper input:hover {
+.views-ui-display-tab-actions .dropbutton input:hover {
   background: none;
   border: none;
 }
diff --git a/core/themes/classy/templates/form/dropbutton-wrapper.html.twig b/core/themes/classy/templates/form/dropbutton-wrapper.html.twig
deleted file mode 100644
index e9e4b9b..0000000
--- a/core/themes/classy/templates/form/dropbutton-wrapper.html.twig
+++ /dev/null
@@ -1,19 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a dropbutton wrapper.
- *
- * Available variables:
- * - children: Contains the child elements of the dropbutton menu.
- *
- * @see template_preprocess()
- * @see template_preprocess_dropbutton_wrapper()
- */
-#}
-{% if children %}
-  {% spaceless %}
-    <div class="dropbutton">
-      {{ children }}
-    </div>
-  {% endspaceless %}
-{% endif %}
diff --git a/core/themes/seven/css/components/dropbutton.component.css b/core/themes/seven/css/components/dropbutton.component.css
index 7aa11e0..b9767d0 100644
--- a/core/themes/seven/css/components/dropbutton.component.css
+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -6,9 +6,9 @@
 /**
  * Reset styling for all elements.
  */
-.js .dropbutton .dropbutton__action > input,
-.js .dropbutton .dropbutton__action > a,
-.js .dropbutton .dropbutton__action > button {
+.dropbutton__action > input,
+.dropbutton__action > a,
+.dropbutton__action > button {
   color: #333333;
   text-decoration: none;
   padding: 0;
@@ -18,9 +18,9 @@
   -webkit-font-smoothing: antialiased;
   text-align: left; /* LTR */
 }
-[dir="rtl"] .js .dropbutton .dropbutton__action > input,
-[dir="rtl"] .js .dropbutton .dropbutton__action > a,
-[dir="rtl"] .js .dropbutton .dropbutton__action > button {
+[dir="rtl"] .dropbutton__action > input,
+[dir="rtl"] .dropbutton__action > a,
+[dir="rtl"] .dropbutton__action > button {
   text-align: right;
 }
 .js .dropbutton__action.last {
@@ -130,12 +130,12 @@
 [dir="rtl"].js .dropbutton--multiple.is-open .dropbutton__action:last-child .button {
   border-radius: 0 0 0.9em 0;
 }
-.js .dropbutton .dropbutton__action a:hover,
-.js .dropbutton .dropbutton__action button:hover,
-.js .dropbutton .dropbutton__action input:hover,
-.js .dropbutton .dropbutton__action a:focus,
-.js .dropbutton .dropbutton__action button:focus,
-.js .dropbutton .dropbutton__action input:focus {
+.dropbutton__action a:hover,
+.dropbutton__action button:hover,
+.dropbutton__action input:hover,
+.dropbutton__action a:focus,
+.dropbutton__action button:focus,
+.dropbutton__action input:focus {
   background-color: #f9f8f6;
   background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
   background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
@@ -143,9 +143,9 @@
   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
   z-index: 3;
 }
-.js .dropbutton .dropbutton__action a:active,
-.js .dropbutton .dropbutton__action input:active,
-.js .dropbutton .dropbutton__action button:active {
+.dropbutton__action a:active,
+.dropbutton__action input:active,
+.dropbutton__action button:active {
   text-decoration: none;
   background-color: #dfdfd9;
   background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);