Press "Enter" to skip to content

CSS Library Buttons That Look Cool | Retro Shadow Buttons

Retro Shadow Buttons, a fun little library to get those old game-based text buttons on your website. Buttons.css is a small CSS library used to create animated, customizable, and retro style buttons and frames using plain HTML.

How to make use of it:

1. Load the stylesheet Buttons.css within the doc and we’re able to go.

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

2. The default font used right here is Roboto Mono, be at liberty to vary it to no matter what you want.

@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 component which serves as an online button.

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

4. Determine the scale 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 internet content (like photos, videos, and so on).

<div class="retro-img">
  // Add Image Here
</div>

Animated Retro Button & Frame In Pure CSS, Retro Shadow Buttons Plugin/Github

Retro-Shadow-Buttons-Demo


See Demo And Download

Official Website(SockAndSandal): Click Here

This superior jQuery/javascript plugin is developed by SockAndSandal. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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