6 Colourfull css animation button
How to Create CSS Animation Buttons for Blogger & WordPress
Want to make your website more interactive and visually appealing? Adding animated CSS buttons can do just that! Whether you're using Blogger or WordPress, these colorful buttons will grab your visitors' attention and improve user experience.
In this guide, we’ll walk you through the HTML & CSS code and show you how to implement it on your site.
HTML Structure: Creating the Buttons
First, let’s define the button structure using simple HTML:
<div class="dbtn"> <a class="btn blue" href="#">Button 1</a> <a class="btn black" href="#">Button 2</a> <a class="btn crimson" href="#">Button 3</a> <a class="btn green" href="#">Button 4</a> <a class="btn violet" href="#">Button 5</a> <a class="btn cyan" href="#">Button 6</a> </div>
How It Works:
<div class="dbtn">
: This container holds all the buttons and aligns them properly.<a class="btn blue" href="#">Button 1</a>
: Each button is a clickable anchor (<a>
) tag with a class for styling.- Custom Classes (
blue
,black
, etc.): These add unique colors and effects to each button.
CSS Styling & Animation
Now, let’s style these buttons and bring them to life with animations.
<style> /* Made by DK technozone*/ .dbtn { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; } /* Button Styling */ .btn { padding: 12px 32px; border-radius: 4px; text-decoration: none; text-transform: uppercase; font-weight: bold; color: white; font-size: 17px; margin: 10px auto; animation: bump 1s infinite alternate; } /* Made by dhanjeerider.shop */ .btn:hover { transition: 0.5s; filter: saturate(4); transform: translateY(-5px); } /* Color Variations */ .blue { background: linear-gradient(45deg, #000125, #0e00c7); box-shadow: 0px 6px 15px -2px #2b58ff; } .black { background: linear-gradient(45deg, red, #000); box-shadow: 0px 6px 15px -2px red; } .crimson { background: linear-gradient(45deg, crimson, #1c0032); box-shadow: 0px 6px 15px -2px crimson; } .green { background: linear-gradient(45deg, #00ff42, #000); box-shadow: 0px 6px 15px -2px green; } .violet { background: linear-gradient(45deg, #4100cd, #0e002d); box-shadow: 0px 6px 15px -2px #662bff; } .cyan { background: linear-gradient(45deg, cyan, #00251c); box-shadow: 0px 6px 15px -2px cyan; } /* Made by DK technozone */ @keyframes bump { 0% { filter: saturate(1); background-size: 100%; } 100% { filter: saturate(2); background-size: 140%; } } </style>
How the CSS Works:
- Button Layout (
.dbtn
): Uses Flexbox for responsive alignment. - Button Style (
.btn
): Includes padding, border-radius, and bold uppercase text for a clean look. - Hover Effects (
.btn:hover
): Increases saturation and adds a smooth hover animation. - Custom Colors (
.blue
,.black
, etc.): Each button has its own gradient background and shadow effect. - Animation (
@keyframes bump
): Creates a subtle pulsing effect, making buttons more dynamic.
Add Buttons to Blogger
To use these buttons on Blogger, follow these steps:
- Log in to your Blogger Dashboard.
- Navigate to Theme > Edit HTML.
- Paste the HTML & CSS code inside the
<style>
section or in a Custom HTML widget. - Click Save and Preview your blog!
Add Buttons to WordPress
For WordPress, you can add the buttons in a few ways:
- Classic Editor: Switch to the Text Mode (instead of Visual) and paste the code.
- Gutenberg Block Editor: Use a Custom HTML Block and insert the code.
- CSS Customization: If needed, go to Appearance > Customize > Additional CSS and paste the CSS there.
- Or you can paste css in addition css then you need to paste html only in custom html or text view mode
- For more chek other codes tutorials
Conclusion
And that’s it! 🎉 Now, you have a set of stylish, animated CSS buttons ready for Blogger & WordPress. These buttons will make your site look more modern and engage visitors with smooth interactions.
You can also customize the colors, hover effects, and animations to match your website’s theme. Try it out and make your blog stand out!
Last word
In this post we will provided information about 6 Colourfull css animation button , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.