---
title: "Vintage Buttons"
date: "2018-09-14T00:00:00+00:00"
tags: ["CSS3","font","uidesign"]
project: "War of the Worlds Broadcast"
---

# Vintage Buttons

Source: https://greenzeta.com/update/vintage-buttons/
Last updated: 2026-01-09T00:45:44+00:00

Project: [War of the Worlds Broadcast](https://greenzeta.com/project/war-of-the-worlds-broadcast/)

I wanted to create a real mid-twentieth century look for the interface, without resorting to images. The button style is inspired by typewriter keys and glowing elevator buttons. The gold ring is a series of box-shadows. The glowing effect is a combination of background color clipped to transparent text and a text-shadow overlay. \[codepen\_embed height="350" theme\_id="0" slug\_hash="jvZMVb" default\_tab="css,result" user="mwilber"\]See the Pen [Vintage Button](https://codepen.io/mwilber/pen/jvZMVb/) by Matthew Wilber ([@mwilber](https://codepen.io/mwilber)) on [CodePen](https://codepen.io).\[/codepen\_embed\]