Implemented the perfect design.

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -18,7 +18,7 @@ const ThreeStrandedButton = (props) => {
         className="btn btn-outline-primary view-button"
         onClick={() => { threeStrandedButtonClickedHandler('view') }}
       >
-        <i className="icon-control-play icon-fw" />
+        <i className="grw-three-stranded-button-icon icon-control-play icon-fw" />
         { t('view') }
       </button>
       <button
@@ -26,7 +26,7 @@ const ThreeStrandedButton = (props) => {
         className="btn btn-outline-primary edit-button"
         onClick={() => { threeStrandedButtonClickedHandler('edit') }}
       >
-        <i className="icon-note icon-fw" />
+        <i className="grw-three-stranded-button-icon icon-note icon-fw" />
         { t('Edit') }
       </button>
       <button
@@ -34,7 +34,7 @@ const ThreeStrandedButton = (props) => {
         className="btn btn-outline-primary hackmd-button"
         onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
       >
-        <i className="fa fa-fw fa-file-text-o" />
+        <i className="grw-three-stranded-button-icon fa fa-fw fa-file-text-o" />
         { t('hackmd.hack_md') }
       </button>
     </div>

src/client/styles/scss/style-app.scss

@@ -69,22 +69,61 @@
   cursor: not-allowed;
 }
 
-.view-button {
-  min-width: 74px;
-}
+.btn-group.grw-three-stranded-button {
+  white-space: nowrap;
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    padding-right: 0;
+    padding-left: 0;
+
+    &:not(:first-child) {
+      &::before {
+        position: absolute;
+        z-index: 2;
+        width: 100%;
+        height: 80%;
+        margin-left: -1px;
+        content: '';
+        border-left: 1px solid;
+      }
+      &::after {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        margin-left: -1px;
+        content: '';
+        border-left: 1px solid transparent;
+        transition: border-color 0.15s ease-in-out;
+      }
+    }
+  }
+
+  .view-button,
+  .edit-button {
+    .grw-three-stranded-button-icon {
+      margin-right: -0.25rem;
+    }
+  }
 
-.edit-button {
-  min-width: 71px;
+  .hackmd-button {
+    font-size: 12px;
+    letter-spacing: -0.6px;
+
+    .grw-three-stranded-button-icon {
+      margin-right: -0.1rem;
+    }
+  }
 }
 // TODO: reactify and replace with `grw-not-available-for-guest`
 .edit-button.edit-button-disabled {
   cursor: not-allowed;
 }
 
-.hackmd-button {
-  min-width: 97px;
-}
-
 .grw-not-available-for-guest {
   cursor: not-allowed !important;
 }

src/client/styles/scss/theme/antarctic.scss

@@ -113,9 +113,17 @@ html[dark] {
   @import 'apply-colors-light';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
+      &::before {
+        border-color: lighten($primary, 55%);
+      }
+      &:hover {
+        &::after {
+          border-color: lighten($primary, 60%);
+        }
+      }
     }
   }
 

src/client/styles/scss/theme/christmas.scss

@@ -187,6 +187,14 @@ html[dark] {
   .grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
+      &::before {
+        border-color: lighten($subthemecolor, 35%);
+      }
+      &:hover {
+        &::after {
+          border-color: lighten($subthemecolor, 45%);
+        }
+      }
     }
   }
 }

src/client/styles/scss/theme/default.scss

@@ -105,9 +105,27 @@ html[light] {
   @import 'apply-colors-light';
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
+      &::before {
+        border-color: lighten($primary, 65%);
+      }
+      &:hover {
+        &::after {
+          border-color: lighten($primary, 70%);
+        }
+      }
+      &:not(:first-child) {
+        margin-left: 0;
+        border-left: none;
+      }
+      &:not(:last-child) {
+        border-right: none;
+      }
+      &:focus {
+        box-shadow: none;
+      }
     }
   }
 }
@@ -205,10 +223,17 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
+      &::before {
+        border-color: $primary;
+      }
+      &:hover {
+        &::after {
+          border-color: darken($primary, 20%);
+        }
+      }
     }
   }
-
 }

src/client/styles/scss/theme/future.scss

@@ -90,9 +90,17 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
+      &::before {
+        border-color: darken($primary, 10%);
+      }
+      &:hover {
+        &::after {
+          border-color: darken($primary, 20%);
+        }
+      }
     }
   }
 

src/client/styles/scss/theme/halloween.scss

@@ -108,9 +108,17 @@ html[dark] {
   @import 'apply-colors-dark';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
+      &::before {
+        border-color: lighten($primary, 5%);
+      }
+      &:hover {
+        &::after {
+          border-color: darken($primary, 20%);
+        }
+      }
     }
   }
 

src/client/styles/scss/theme/island.scss

@@ -110,9 +110,17 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
+      &::before {
+        border-color: lighten($primary, 5%);
+      }
+      &:hover {
+        &::after {
+          border-color: darken($primary, 5%);
+        }
+      }
     }
   }
 }

src/client/styles/scss/theme/mono-blue.scss

@@ -89,9 +89,17 @@ html[light] {
     }
   }
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($primary, lighten($primary, 65%), lighten($primary, 70%));
+      &::before {
+        border-color: lighten($primary, 65%);
+      }
+      &:hover {
+        &::after {
+          border-color: lighten($primary, 70%);
+        }
+      }
     }
   }
 }
@@ -197,9 +205,17 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
+      &::before {
+        border-color: darken($primary, 10%);
+      }
+      &:hover {
+        &::after {
+          border-color: darken($primary, 20%);
+        }
+      }
     }
   }
 }

src/client/styles/scss/theme/nature.scss

@@ -112,9 +112,17 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
+      &::before {
+        border-color: lighten($bgcolor-navbar, 65%);
+      }
+      &:hover {
+        &::after {
+          border-color: lighten($bgcolor-navbar, 70%);
+        }
+      }
     }
   }
 }

src/client/styles/scss/theme/spring.scss

@@ -94,9 +94,17 @@ html[dark] {
   @import 'apply-colors-light';
 
   //Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
+      &::before {
+        border-color: lighten($primary, 5%);
+      }
+      &:hover {
+        &::after {
+          border-color: lighten($primary, 10%);
+        }
+      }
     }
   }
 

src/client/styles/scss/theme/wood.scss

@@ -162,9 +162,17 @@ html[dark] {
   }
 
   // Button
-  .grw-three-stranded-button {
+  .btn-group.grw-three-stranded-button {
     .btn.btn-outline-primary {
       @include three-stranded-button(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
+      &::before {
+        border-color: lighten($primary, 15%);
+      }
+      &:hover {
+        &::after {
+          border-color: lighten($primary, 25%);
+        }
+      }
     }
   }
 }