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!
Visit the Templates Library and explore the amazing and awesome collection of pneumorphic animations, as u hover over them!
Like any of the buttons? Want to use it on your page? It's now made easy with the Animated Buttons Generator!
- 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.
- 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.htmland the CSS asstyle.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.
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!
Expand
<details><summary><button class="custom-btn btn-12">Expand</button></summary>
[All text and contents here]
</details>
Use it to make your 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?
Prs