Welcome to the Amazing Collection of Animated buttons made with CSS !!!

An Awesome collection of buttons with impressive animations written in CSS; with a CSS writer made of Dynamic HTML where you can design with just basic parameters, without even knowing CSS!

Explore the Buttons Collection

Visit the Templates Library and explore the amazing and awesome collection of pneumorphic animations, as u hover over them!

How to Use

Like any of the buttons? Want to use it on your page? It’s now made easy with the Animated Buttons Generator!

Manual Method :

• Your can go to the directory and search for index.html, and corresponding style.css files. It is well organised with comments there, so u can get your code, and use thm directly.

Using the Animated Buttons Generator:

• Load the animated buttons Generator
• Choose a template from the library, and put the number there.
• Enter basic functionalities of the button with HTML.
• Give the basic parameters for CSS (No code required, just know what you are putting). If u cant figure out, put the values as per the template, as will be given along with the question in brackets.
• Then, it will import the animation from the template. So, basically, u have designed your own shape and size for badg, but taking the animations from the template.
• The Code lists are editable. So, if you want, you can also edit your code there.
• After it is done, copy the final code and paste in files. The HTML code is to be saved as index.html and the CSS as style.css. You can paste thm directly as Git Repos, or use Notepad++ for offline purposes.

★ The Best part is that You don’t have to code a single line! It will ask you questions, and keep answering. It will accordingly write your HTML and CSS code.

⚠️ Please don’t edit, or attemp rename inline or file wise, until you are sure about the consequences!

Read More: Use it As Expand of HTML Summary!

There, in the Automatic button maker, you can add links to your button, but what if u want to use it as Read More button to expand HTML Summaries? Read Ahead!

### This is the Syntax : ```

[All text and contents here]

``` Use it to make your own ***Read More*** button.

*when you click on the expand button, it doesnt work, but as u click a bit aside, it gets expanded! Can I have a Solution to put in order?

Contribution

Contributions of all kinds will be accepted and well credited!

Have made your own animation badge? Add it here!

Firstly, if u have made one, fork this repo, and edit, and create a PR. I will be very glad to accept!

Now, your button needs to be added to the batch maker.

• Go to thesource code directory and download the .sb3 file.
• Add your CSS code to the list. Remember to add it line-wise. You should add thm to the list Cascae Style Sheets.
• Now, add compatible HTML line in the list , template button HTML attribute index.
• Export with Turbowarp packager, keeping all parameters and activities same! Also upload your new scratch file to the source code folder, with the name, css.sb3.

The best method to add items line wise in a Scratch list is, save the textx, line wise, i mean, copy-paste from your code, and same as .txt. Then right click to target list, and import!

There is a batch up on this page. There’s a glitch. Will wait for responses on it!

Contributors:

SparkScratch-P

License :

GNU GPL 0.3

⭐ Pls Show Some Support by Starring Some of the Repos!⭐

❤️ Thank You ❤️

https://sparkscratch-p.github.io/