# Retro button Web 1\.0 and Web 2\.0 buttons: glossy gel pills, Aqua jelly and Windows 98 bevels from one base color\. - Kind: tool - Category: misc - Default background: light - Use when: Personal sites, Neocities\-style navigation, guestbooks, retro game menus and Y2K\-themed pages\. - Avoid when: Modern product UI, where a glossy or beveled button reads as dated rather than playful\. - Requires: None - Credit: [funnyorangecat](https://funnyorangecat.neocities.org) - License: MIT ## Settings | Parameter | Value | | --- | --- | | text | enter site | | style | gloss | | color | 7FE0B8 | | text\_color | 2D6E55 | | font | verdana | | weight | 700 | | size | 16 | | radius | 10 | | width | auto | ## HTML ```html ``` ## CSS ```css .tv-retro-button { appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--tv-retro-button-width, auto); min-height: 2em; padding: 0.3em 1.1em; border: 1px solid transparent; border-radius: var(--tv-retro-button-radius, 10px) / calc(var(--tv-retro-button-radius, 10px) * 2); color: var(--tv-retro-button-text-color, #967142); font-family: var(--tv-retro-button-font, Arial, Helvetica, sans-serif); font-size: var(--tv-retro-button-size, 16px); font-weight: var(--tv-retro-button-weight, 700); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter 0.3s, transform 0.1s; } .tv-retro-button:focus-visible { outline: 2px solid var(--tv-retro-button-text-color, #967142); outline-offset: 2px; } /* Web 2.0 gloss: a hard stop halfway down splits the pill into a pale top and a saturated bottom. */ .tv-retro-button--gloss { border-color: var(--tv-retro-button-color, #ffd359); background: linear-gradient( color-mix(in srgb, var(--tv-retro-button-color, #ffd359) 25%, #fff) 0%, color-mix(in srgb, var(--tv-retro-button-color, #ffd359) 65%, #fff) 50%, var(--tv-retro-button-color, #ffd359) 51%, color-mix(in srgb, var(--tv-retro-button-color, #ffd359) 40%, #fff) 100% ); } .tv-retro-button--gloss:hover { filter: drop-shadow(1px 1px 8px var(--tv-retro-button-color, #ffd359)); } .tv-retro-button--gloss:active { transform: translateY(1px); } /* Aqua jelly: a deep body that brightens toward the bottom, under a white highlight on the top half. */ .tv-retro-button--aqua { position: relative; isolation: isolate; border-color: color-mix(in srgb, var(--tv-retro-button-color, #2f7fdb) 65%, #000); background: linear-gradient( color-mix(in srgb, var(--tv-retro-button-color, #2f7fdb) 85%, #000), var(--tv-retro-button-color, #2f7fdb) 55%, color-mix(in srgb, var(--tv-retro-button-color, #2f7fdb) 45%, #fff) ); box-shadow: inset 0 -3px 5px color-mix(in srgb, var(--tv-retro-button-color, #2f7fdb) 35%, #fff), 0 2px 3px rgb(0 0 0 / 0.3); text-shadow: 0 1px 1px rgb(0 0 0 / 0.3); } .tv-retro-button--aqua::before { content: ""; position: absolute; z-index: -1; inset: 1px 6% 50%; border-radius: inherit; background: linear-gradient(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.2)); } .tv-retro-button--aqua:hover { filter: brightness(1.08) saturate(1.1); } .tv-retro-button--aqua:active { filter: brightness(0.92); } /* Web 1.0 bevel: Windows 98-style light and dark edges, flipped while pressed. */ .tv-retro-button--bevel { border: 0; background: var(--tv-retro-button-color, #c0c0c0); box-shadow: inset -1px -1px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 10%, #000), inset 1px 1px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 10%, #fff), inset -2px -2px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 65%, #000), inset 2px 2px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 55%, #fff); } .tv-retro-button--bevel:active { padding: calc(0.3em + 1px) calc(1.1em - 1px) calc(0.3em - 1px) calc(1.1em + 1px); box-shadow: inset -1px -1px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 10%, #fff), inset 1px 1px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 10%, #000), inset -2px -2px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 55%, #fff), inset 2px 2px color-mix(in srgb, var(--tv-retro-button-color, #c0c0c0) 65%, #000); } .tv-retro-button--bevel:focus-visible { outline: 1px dotted currentColor; outline-offset: -5px; } @media (prefers-reduced-motion: reduce) { .tv-retro-button { transition: none; } .tv-retro-button:active { transform: none; } } ``` ## Params | Parameter | Type | Default | Range or options | | --- | --- | --- | --- | | text | text | enter site | Maximum 40 characters | | style | select | gloss | gloss, aqua, bevel | | color | color | FFD359 | | | text\_color | color | 967142 | | | font | select | arial | arial, verdana, tahoma, trebuchet, lucida, comic, rounded | | weight | select | 700 | 400, 700 | | size | range | 16 | 11 to 28; step 1 | | radius | range | 10 | 0 to 24; step 1 | | width | select | auto | auto, full | ## Presets - [Butter](https://thuvien.org/ui/tools/retro-button?preset=butter) - [Bubblegum](https://thuvien.org/ui/tools/retro-button?preset=bubblegum) - [Mint soda](https://thuvien.org/ui/tools/retro-button?preset=mint-soda) - [Lilac](https://thuvien.org/ui/tools/retro-button?preset=lilac) - [Aqua](https://thuvien.org/ui/tools/retro-button?preset=aqua) - [Graphite](https://thuvien.org/ui/tools/retro-button?preset=graphite) - [Classic 98](https://thuvien.org/ui/tools/retro-button?preset=classic-98) - [Geocities](https://thuvien.org/ui/tools/retro-button?preset=geocities)