diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a7cf4c..a909979 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -21,3 +21,7 @@
 ## 2024-07-15 - Expand clickable area of project cards
 **Learning:** Using an anchor tag to wrap an entire card (block-level element) can result in verbose and confusing screen reader output. However, restricting the clickable area to just the title makes the UI harder to interact with (violating Fitts's Law).
 **Action:** Apply `position: relative` to the card container and use a `::after` pseudo-element with `position: absolute; inset: 0;` on the title's anchor tag. This expands the clickable area to the whole card while keeping semantic and accessible HTML structure.
+
+## 2026-08-03 - Add active state for buttons
+**Learning:** 단일 버튼과 링크(.button, .language-switch button) 요소들에 hover 상태는 존재하지만, 클릭하는 순간의 시각적 피드백(:active)이 누락되어 있어 물리적인 인터랙션 경험이 다소 밋밋합니다.
+**Action:** 인터랙티브 요소에는 상태 변화(focus, hover, active)마다 적절한 시각적 단서를 제공하여 사용자가 의도한 조작이 시스템에 잘 전달되었음을 알 수 있도록 transform: scale()을 활용해 마이크로 인터랙션을 구현합니다.
diff --git a/styles.css b/styles.css
index e3de699..83e9c75 100644
--- a/styles.css
+++ b/styles.css
@@ -108,7 +108,11 @@ a {
   font-size: 13px;
   font-weight: 850;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
+}
+
+.language-switch button:active {
+  transform: scale(0.96);
 }
 
 .language-switch button:not([aria-pressed="true"]):hover {
@@ -218,7 +222,11 @@ h1 {
   text-decoration: none;
   font-size: 15px;
   font-weight: 800;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
+}
+
+.button:active {
+  transform: scale(0.98);
 }
 
 .button:hover {