diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index c5e95036f4f9d236bf388696a128b356b7d05285..912cf12d23abee25e07d451d82fff8c66b70f865 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
@@ -19,7 +19,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
-    GlDeprecatedButton,
+    GlButton,
     GlLoadingIcon,
   },
   directives: {
@@ -82,16 +82,16 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-button
+  <gl-button
     :id="`js-ci-action-${link}`"
     v-gl-tooltip="{ boundary: 'viewport' }"
     :title="tooltipText"
     :class="cssClass"
     :disabled="isDisabled"
-    class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper d-flex align-items-center justify-content-center"
+    class="js-ci-action ci-action-icon-container ci-action-icon-wrapper d-flex align-items-center justify-content-center"
     @click="onClickAction"
   >
     <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
     <icon v-else :name="actionIcon" />
-  </gl-deprecated-button>
+  </gl-button>
 </template>
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 6cd8ea7aa3aa954f08f9f2b2297e6d1fd35105ca..b94262f98127ce4ca80f090032a9cf6aa607076b 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -669,24 +669,14 @@
     &.ci-action-icon-wrapper {
       height: 30px;
       width: 30px;
-      background: $white;
-      border: 1px solid $border-color;
       border-radius: 100%;
       display: block;
-
-      &:hover {
-        background-color: $gray-darker;
-        border: 1px solid $dropdown-toggle-active-border-color;
-
-        svg {
-          fill: $gl-text-color;
-        }
-      }
+      padding: 0;
+      line-height: initial;
 
       svg {
         fill: $gl-text-color-secondary;
-        position: relative;
-        top: -1px;
+        vertical-align: initial;
       }
 
       .spinner {
@@ -695,7 +685,8 @@
 
       &.play {
         svg {
-          left: 2px;
+          left: 1px;
+          top: 1px;
         }
       }
     }
@@ -846,27 +837,16 @@ button.mini-pipeline-graph-dropdown-toggle {
       height: $ci-action-dropdown-button-size;
       width: $ci-action-dropdown-button-size;
 
-      background: $white;
-      border: 1px solid $border-color;
       border-radius: 50%;
       display: block;
 
-      &:hover {
-        background-color: $gray-darker;
-        border: 1px solid $dropdown-toggle-active-border-color;
-
-        svg {
-          fill: $gl-text-color;
-        }
-      }
-
       .spinner,
       svg {
         width: $ci-action-dropdown-svg-size;
         height: $ci-action-dropdown-svg-size;
         fill: $gl-text-color-secondary;
         position: relative;
-        top: auto;
+        top: 1px;
         vertical-align: initial;
       }
     }