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

Category: CSS & CSS3 | October 16, 2020
Views Total:1,562 views
Official Page:Go to website
Last Update:October 16, 2020


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(',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

4. Determine the size of the retro button.

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

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

<div class="retro-img">
  <img src="" />

You Might Be Interested In:

Leave a Reply