Apply Animations to Button using CSS

Last Reply 4 months ago By WVLaw

Posted 4 months ago

What I am looking for is a good looking CSS animation that I can add for each little button for my website. I don't want it to be too invasive for the user experience but something that simpluy adds a little bit of thrill to the user experience.

If anyone could link maybe a recourse or codebox, that would be greatly appreciated. Thank you.

-Rapidtrans

You are viewing reply posted by: WVLaw 4 months ago.
Posted 4 months ago

Hi there RapidTrans, I hope you are having a good morning today.

I'm glad that I spotted this question because I will surely be able to help. 

The great thing about CSS is that you can customize animations any way you'd like and they are extremely easy to make. I am going to include a codebox below that might help you.

@keyframes vibrate {

0%{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
25%{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
50%{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
75%{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
100%{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
}

Inside this shaking animation, you can declare at certain percentages of the animation what you want to occur. Also, this animation is extremely easy to edit to your liking.. so that is great! By the way I got this animation from Button Animations With Code CSS, all credit for the code in the codebox goes to them.

I hope that the codebox and recourses I linked will help you be more comfortable in make CSS animations.

Have an amazing day!