Update index.html

index.html

@@ -267,14 +267,20 @@
     }
     
     .header-right a {
-      color: #2563eb;
-      font-size: 0.9rem;
+      display: inline-block;
+      background-color: #2563eb;   /* 青背景 */
+      color: white;                /* 白文字 */
+      font-size: 1rem;
       font-weight: 600;
+      padding: 0.55rem 1rem;
+      border-radius: 0.5rem;
       text-decoration: none;
+      transition: background-color 0.2s ease, transform 0.1s ease;
     }
     
     .header-right a:hover {
-      text-decoration: underline;
+      background-color: #1e40af;  /* ホバーで濃い青 */
+      transform: translateY(-1px); /* ちょい浮く */
     }
 
     .progress {
@@ -302,15 +308,12 @@
       </button>
       <h1>nanochat webgpu</h1>
     </div>
+  </div>
 
-    
-    <!-- ▼ 右上リンク ▼ -->
-    <div class="header-right">
-      <a href="https://github.com/HayatoHongo/Everyones_nanoGPT.git" target="_blank">
-        Learn to Build My LLM from scratch
-      </a>
-    </div>
-    <!-- ▲ ここまで ▲ -->
+  <div class="header-right">
+    <a href="https://github.com/HayatoHongo/Everyones_nanoGPT.git" target="_blank">
+      Learn to Build My LLM from scratch
+    </a>
   </div>
 
   <div class="chat-container" id="chatContainer">