Enhance email signup button with modern gradient design and envelope icon

- Replace plain arrow with SVG envelope icon for better context
- Add beautiful blue-to-purple gradient background
- Implement enhanced hover effects with scale, lift, and glow
- Add proper focus states for improved accessibility
- Include smooth animations and shadow effects
- Update CSS cache-busting version to v11

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: mlamothe

css/style.css

@@ -214,21 +214,52 @@ a:hover {
   height: 40px;
   border-radius: 50%;
   border: none;
-  background: var(--accent-color);
+  background: linear-gradient(135deg, #226ce0 0%, #3b82f6 50%, #6366f1 100%);
   color: white;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 2px 8px rgba(34, 108, 224, 0.3);
+  position: relative;
+  overflow: hidden;
 }
 
 .submit-btn:hover {
-  background: #1a5bb8;
-  transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(34, 108, 224, 0.3);
+  background: linear-gradient(135deg, #1a5bb8 0%, #2563eb 50%, #4f46e5 100%);
+  transform: scale(1.08) translateY(-1px);
+  box-shadow: 0 8px 24px rgba(34, 108, 224, 0.5);
+}
+
+.submit-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(34, 108, 224, 0.4), 0 8px 24px rgba(34, 108, 224, 0.5);
+}
+
+.submit-btn:active {
+  transform: scale(1.02) translateY(0px);
+  transition: all 0.1s ease;
+}
+
+.submit-btn::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.submit-btn:hover::before {
+  opacity: 1;
 }
 
 /* Custom Notification Styles */

index.html

@@ -11,7 +11,7 @@
   <link
     href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
     rel="stylesheet">
-  <link rel="stylesheet" href="css/style.css?v=10" />
+  <link rel="stylesheet" href="css/style.css?v=11" />
   <script src="js/main.js"></script>
 </head>
 
@@ -27,7 +27,12 @@ <h3>Connect & Stay Updated</h3>
       <p>I'd love to keep you posted on new books and writing adventures.</p>
       <div class="email-signup">
         <input type="email" placeholder="Your email address" class="email-input" id="custom-email" />
-        <button type="submit" class="submit-btn" id="custom-submit">→</button>
+        <button type="submit" class="submit-btn" id="custom-submit">
+          <svg width="18" height="14" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M2 4L10 12L22 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M2 4H22V16C22 17.1046 21.1046 18 20 18H4C2.89543 18 2 17.1046 2 16V4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
       </div>
 
       <!-- MailerLite embedded form (properly loaded) -->