Author: | SockAndSandal |
---|---|
Views Total: | 1,412 views |
Official Page: | Go to website |
Last Update: | October 16, 2020 |
License: | MIT |
Preview:

Description:
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>