CODEWITHSUNDEEP
cssanimation
Paul McBurney
Paul McBurney

Reputation: 87

How to implement CSS button animations into your website?

I stumbled across this website that lists CSS button animations. I have linked it --> https://buttonanimations.github.io/ I don't know if its just me but when I try to implement the animations into my website (Copy and paste) they just break. Is it on their end or mine, maybe they didn't input the animations correctly into the website.

(Currently using Safari) (I mean it should work right?)

Upvotes: 0

Views: 99

Answers (2)

Speedy
Speedy

Reputation: 13

So, you could do that but for me personally, I think the easiest way to do this would be to use the animation attribute in the section. Here is an example:

#popoutbutton {
font-family: 'Nanum Gothic', sans-serif;
border: 3px solid #666;
background-color: black;
cursor: pointer;
color: white;
transition: background-color 300ms ease-out 100ms;
}
#popoutbutton:hover {
background-color: grey;
}
<a 
target="popup"                          onclick="window.open('WEBSITEURLHERE','popup','width=400,height=600'); return false;">
  <button id="popoutbutton">Pop Out</button>
</a>

This, at least for me personally, is the easiest way to do this.

Upvotes: 0

MaartenDev
MaartenDev

Reputation: 5802

The animations can be used by clicking on the animation on the page, copying the value:

.button_name:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.button_name { width: 300px; height: 45px; background-color: #cccccc; }

and putting the code in a stylesheet or <style> element.

Note that the .button_name selector should be replaced by the class(such as hover_button) that the element has when putting the code in a file or style element:

<button class="hover_button">Test</button>


.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
    </style>
</head>
<body>
<button class="hover_button">Test</button>
</body>
</html>

Upvotes: 1

Related Questions