diff --git a/src/components/CodeModal.vue b/src/components/CodeModal.vue
index 930fa0bea7236a83ae67a68624b1921d9baa003c..ea8e8b1413bdd5e570223d0b83c326c9fdfbe988 100644
--- a/src/components/CodeModal.vue
+++ b/src/components/CodeModal.vue
@@ -211,7 +211,9 @@ onUnmounted(() => {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.25s ease, transform 0.25s;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 0.25s ease, transform 0.25s;
+  }
 }
 
 .fade-enter-from,
diff --git a/src/layouts/Container.vue b/src/layouts/Container.vue
index 0362b2d7d99009270bf99870f2a89839ff6e0e41..1e38701e3a64ea4ce49941246ec4b91c4e8012dd 100644
--- a/src/layouts/Container.vue
+++ b/src/layouts/Container.vue
@@ -58,7 +58,6 @@ onUnmounted(() => {
 .container {
   height: 100%;
   padding-right: var.$layout-sider-width;
-  transition: padding-right 0.2s;
 
   &.full {
     padding-right: 0;
@@ -67,5 +66,9 @@ onUnmounted(() => {
   @media screen and (max-width: var.$screen-lg) {
     padding-right: 0;
   }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: padding-right 0.2s;
+  }
 }
 </style>
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 537f6507a1ae3cc0463e0d9be0a8d8fe49886405..c97caf206817ff213dcdb7a1fdbd95deaff816e5 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -56,27 +56,65 @@ import { recordEvent } from '@/utils/ga'
     margin-left: auto;
 
     .github-button {
+      position: relative;
+      z-index: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 8rem;
-      height: 2.5rem;
+      width: 9rem;
+      height: 2.6rem;
+      overflow: hidden;
       color: var.$color-text;
       font-weight: bold;
       font-size: 1.05rem;
       background-color: var.$color-dark;
       border-radius: 0.6rem;
       cursor: pointer;
-      transition: box-shadow 0.2s, background-color 0.2s;
       user-select: none;
 
-      &:hover {
-        background-color: lighten(var.$color-dark, 2);
-        box-shadow: 0 0.2rem 1.5rem 0.2rem lighten(var.$color-dark, 5);
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color 0.2s;
+
+        &::before,
+        &::after {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          z-index: -1;
+          width: 5rem;
+          height: 5rem;
+          background: var.$color-text;
+          border-radius: 50%;
+          transform: translate(100%, -25%) translate3d(0, 0, 0);
+          opacity: 0;
+          transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1),
+            opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
+          content: '';
+        }
+
+        &:hover {
+          background-color: darken(var.$color-dark, 3);
+
+          &::before,
+          &::after {
+            opacity: 0.15;
+            transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1),
+              opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
+          }
+
+          &::before {
+            transform: translate3d(50%, 0, 0) scale(0.9);
+          }
+
+          &::after {
+            transform: translate(50%, 0) scale(1.1);
+          }
+        }
       }
 
       .text {
         margin-left: 0.5rem;
+        letter-spacing: 0.03rem;
       }
     }
   }
diff --git a/src/layouts/Sider.vue b/src/layouts/Sider.vue
index 46ea8f36fb52ecd3d8ac0e6d92b9ed8e95af5100..e9b3c014d990533e0636f9234fbefecfc5dadc67 100644
--- a/src/layouts/Sider.vue
+++ b/src/layouts/Sider.vue
@@ -24,7 +24,13 @@ const { isCollapsed, openSider, closeSider } = useSider()
   right: 0;
   z-index: 200;
   height: 100%;
-  transition: transform 0.2s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    & {
+      transition: transform 0.2s;
+      will-change: transform;
+    }
+  }
 
   .icon-right {
     transition: transform 0.2s;