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

Author: SockAndSandal
Views Total: 934 views
Official Page: Go to website
Last Update: October 16, 2020
License: MIT


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(',[email protected],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="" />

See also  Simple Cross-Browser Pure CSS Loading Animations - whirl.css

Leave a Reply

Your email address will not be published. Required fields are marked *