Apply Animations to Button using CSS

RapidTrans
 
on Feb 17, 2020 11:22 PM
Sample_916149.zip
3577 Views

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

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 18, 2020 01:11 AM

Hi RapidTrans,

Check this example.

For more effect you need to learn CSS.

CSS Buttons

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animate Buttons With CSS</title>
    <style type="text/css">
        .button
        {
            padding: 3px 8px;
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            outline: none;
            color: #fff;
            background-color: #4CAF50;
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px #999;
        }
        
        .button:hover
        {
            background-color: #0AE075;
        }
        
        .button:active
        {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>
</head>
<body>
    <input type="button" value="Save" class="button" />
</body>
</html>

Demo

WVLaw
 
on Feb 18, 2020 08:47 AM

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!