Using CSS to make button animate

Question

I am trying to make two buttons animate from small to large on hover using CSS. I have the following which does make the button change but without no animation. (button.png and buttonHover.png are the same pixel width and height - but the images are of a small button with a transparent surround and a large button).

It may well be that this is the wrong way to do it - this is the first time I have trued this.

a.button {
background: url(button.png) no-repeat 0 0;
width: 150px;
height: 62px;
display: block;
line-height: 62px;
text-align: center;
font-size:9px;
color: white;
}

a.button:hover{
    background: url(buttonPressed.png) no-repeat 0 0;
    font-size:14px;
-webkit-animation: myButton 1s; /* Chrome, Safari, Opera */
 animation: myButton 1s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myButton {
    background: url(buttonHover.png) no-repeat 0 0;
    font-size:14px;
}

/* Standard syntax */
@keyframes myButton {
    background: url(buttonPressed.png) no-repeat 0 0;
    font-size:14px;
}

Feel free to add the image to the question and we can see if it can easily be remade in CSS :) — misterManSam
– misterManSam, Commented Oct 10, 2014 at 13:18

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

No need for keyframes; use transition.

As Zach mentioned in the comments, background images can't be animated between. You should recreate the backgrounds in CSS.

From the MDN:

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Example

In this example, the "all" indicates that every difference between the normal state and :hover that can be animated should transition over 0.5 seconds. Here is a complete list of animated properties.

Use the appropriate browser prefixes before the non-prefixed transition as needed. Depending on your needs, browser prefixes could be unnecessary. Have a look over here on caniuse.com for an overview of browser support.

  a.button {
    background: #000;
    width: 150px;
    height: 62px;
    display: block;
    line-height: 62px;
    text-align: center;
    font-size: 9px;
    color: #FFF;
    transition: all 0.5s;
  }
  a.button:hover {
    background: #F00;
    font-size: 14px;
  }

<a class="button">Button</a>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 10, 2014 at 12:59

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RGriffiths Over a year ago

Thanks. The fact that I can't animate the image itself explains the problem.

Santiago Nicolas Roca · Accepted Answer · 2014-10-10 13:01:37Z

0

Im leaving you a working example on how to implement it. Hope it helps.

button {
    width : 100px;
    height: 20px; 
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

button:hover {
        width : 150px;
        height: 30px;
}


<button>

JSfiddle

answered Oct 10, 2014 at 13:01

Santiago Nicolas Roca

3993 silver badges9 bronze badges

1 Comment

RGriffiths Over a year ago

I see this. But this is a transition in size. What I want to do is fade actual image. I guess that is not possible.

Collectives™ on Stack Overflow

Using CSS to make button animate

2 Answers 2

Example

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related