Animated Retro Button & Frame In Pure CSS – Buttons.css

Buttons.css is a tiny CSS library used to create animated, customizable, vintage style buttons & frames using plain HTML.

How to use it:

1. Load the stylesheet Buttons.css in the document and we’re ready to go.

<link rel="stylesheet" href="buttons.css" />

2. The default font used here is Roboto Mono, feel free to change it to whatever you like.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap');

3. Add the CSS class retro to the target element which serves as a web button.

<div class="retro">
  Button text
</div>

4. Determine the size of the retro button.

<div class="retro rbtn-big">
  Big Button Example
</div>
<div class="retro rbtn-small">
  Small Button Example
</div>

5. Use this library to create a retro frame for any web content (like images, videos, etc).

<div class="retro-img">
  <img src="https://source.unsplash.com/u5e1kqW6E3M/400x250" />
</div>