microcosm.blue / hubble-website
top secret
fork atom

pretty meh cta buttons

bad-example.com 9719f8b5 22516b21

+39 -53
+8 -15
src/components/Nav.astro
··· 28 28 <li> 29 29 <a 30 30 href={href} 31 - class:list={['nav-link', { 'nav-link--active': isActive }]} 31 + class:list={[ 32 + 'btn', 33 + 'soft', 34 + 'nav-link', 35 + { 'nav-link-active': isActive }, 36 + ]} 32 37 aria-current={isActive ? 'page' : undefined} 33 38 target={pop ? '_blank' : undefined} 34 39 > ··· 81 86 82 87 .nav-link { 83 88 display: block; 84 - padding: 0.2rem 0.75rem; 85 - border-radius: var(--radius-md); 86 - font-weight: 600; 87 - font-size: 0.95rem; 88 - text-decoration: none; 89 - color: var(--color-muted); 90 - transition: color var(--transition), background-color var(--transition); 91 89 } 92 90 93 - .nav-link:hover { 94 - color: var(--color-text); 95 - background: var(--color-border); 96 - } 97 - 98 - .nav-link--active { 91 + .nav-link-active { 99 92 color: var(--color-accent2); 100 93 background: color-mix(in srgb, var(--color-accent2) 12%, transparent); 101 94 } 102 95 103 - .nav-link--active:hover { 96 + .nav-link-active:hover { 104 97 color: var(--color-accent2); 105 98 background: color-mix(in srgb, var(--color-accent2) 18%, transparent); 106 99 }
+19
src/pages/index.astro
··· 28 28 <a href="https://microcosm.blue" style="color: var(--color-accent-microcosm)" target="_blank">microcosm</a> and 29 29 <a style="color: var(--color-accent-bsky)">Bluesky</a>, deploying by end of June. 30 30 </p> 31 + <div class="cta-links"> 32 + <a href="#" class="btn soft" target="_blank" rel="noopener"> 33 + Read the launch post 34 + </a> 35 + <a href="https://bsky.app/profile/microcosm.blue" class="btn soft" target="_blank" rel="noopener"> 36 + Follow on Bluesky 37 + </a> 38 + <a href="#" class="btn soft" target="_blank" rel="noopener"> 39 + Join our Discord 40 + </a> 41 + </div> 31 42 </div> 32 43 </div> 33 44 </section> ··· 64 75 } 65 76 .info-section p { 66 77 max-width: none; 78 + } 79 + .cta-links { 80 + display: flex; 81 + width: 100%; 82 + justify-content: center; 83 + flex-wrap: wrap; 84 + gap: var(--space-3); 85 + padding-top: var(--space-8); 67 86 } 68 87 </style>
+12 -38
src/styles/global.css
··· 195 195 flex: 1; 196 196 } 197 197 198 - /* everyone's favourite: buttons */ 198 + /* buttons */ 199 199 .btn { 200 200 display: inline-flex; 201 201 align-items: center; 202 202 gap: var(--space-2); 203 - padding: var(--space-3) var(--space-6); 204 - border-radius: var(--radius-full); 205 - font-weight: 700; 206 - font-size: 1rem; 203 + padding: 0.2em 0.75em; 204 + border-radius: var(--radius-md); 205 + font-weight: 600; 206 + font-size: 0.95rem; 207 207 text-decoration: none; 208 - border: 2px solid transparent; 209 208 cursor: pointer; 210 - transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); 211 - } 212 - .btn:hover { 213 - transform: translateY(-1px); 214 - } 215 - 216 - .btn.primary { 217 - background: var(--color-accent1); 218 - color: #fff; 219 - border-color: var(--color-accent1); 220 - } 221 - 222 - .btn.primary:hover { 223 - background: transparent; 224 - color: var(--color-accent1); 209 + transition: background-color var(--transition), color var(--transition); 225 210 } 226 - 227 - .btn.outline { 228 - background: transparent; 229 - color: var(--color-accent2); 230 - border-color: var(--color-accent2); 211 + .btn.soft { 212 + display: flex; 213 + color: var(--color-muted); 231 214 } 232 - 233 - .btn.outline:hover { 234 - background: var(--color-accent2); 235 - color: #fff; 236 - } 237 - 238 - /* cards, why not */ 239 - .card { 240 - background: var(--color-surface); 241 - border: 1px solid var(--color-border); 242 - border-radius: var(--radius-sm); 243 - padding: var(--space-3) var(--space-4); 215 + .btn.soft:hover { 216 + color: var(--color-text); 217 + background: var(--color-border); 244 218 }