animated gif icon for button html

Question

I am new to html.I need a delete button with animated style. I have used a gif image for animation. I want this image to be run when the user place the mouse over it. Currently, the gif image is running infinite. How to make the image run when the user move the mouse over it. Help me with some solutions. If you have any other transparent delete image, please provide, it can help me.

Here's the markup I tried:

<html>
  <body>
    <a>
      <img src="https://i.postimg.cc/1RGh8PpK/delete.gif"
           alt="Delete image" width="100" height="100" />
    </a>
  </body>
</html>

Set a static image for the default state and swap it with a gif on hover. — Mr. Polywhirl, Nov 04 '19 at 13:19
Possible duplicate of [Animating a gif on hover](https://stackoverflow.com/questions/7473117/animating-a-gif-on-hover) — Harun Yilmaz, Nov 04 '19 at 13:21
@Harun Yilmaz, the answer doesn't work.. it was an outdated one. — Stack Kiddy, Nov 04 '19 at 13:27
What do you mean by "outdated"? It is written in jQuery but you can convert it to pure JavaScript or CSS. — Harun Yilmaz, Nov 04 '19 at 13:30

score 6 · Answer 1 · answered Nov 04 '19 at 14:08

Head on over EZGIF to crop your gif and make it an appropriate size for a button:

Use your computer to take a static screenshot of the gif (you'll have to time it right):

Use HTML to hold both the static and animated image elements:

<img class='static_trash' id = 'static_btn' src='https://collaboratescience.com/stack/googs/trash_static.png' alt='Delete image' width='100' height='100' />

<img class='live_trash' id = 'live_btn' src='https://i.postimg.cc/1RGh8PpK/delete.gif' alt='Delete image' width='100' height='100' />

Use CSS to set live_trash to "display: none"

. live_trash {
    "display" : "none"
}

Use JavaScript to change image source on hover:

Vanilla JavaScript:

let static_elem = document.getElementById("static_btn")
let live_elem = document.getElementById("live_btn")

static_elem.addEventListener("mouseenter", function( event ) {   
    event.target.style.display = "none";
    live_elem.style.display = "block"
})

static_elem.addEventListener("mouseleave", function( event ) {   
    event.target.style.display = "block";
    live_elem.style.display = "none"
})

Result:

You can play with crop sizing to get it better.

Mr. Polywhirl · Answer 2 · 2019-11-04T13:37:49.990

You can achieve this with JavaScript or CSS. All you need is a static frame from the gif.

JavaScript

You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.

const states = {
  'default': "https://i.stack.imgur.com/mJHTA.png",
  'hover': "https://i.stack.imgur.com/WwxRR.gif"
};

let img = document.querySelector('#hover-img');

img.addEventListener('mouseenter', function(e) {
  img.setAttribute('src', states.hover);
});
img.addEventListener('mouseleave', function(e) {
  img.setAttribute('src', states.default);
});

<a>
  <img src="https://i.stack.imgur.com/mJHTA.png" id="hover-img" alt="Delete image" width="100" height="100" />
</a>

CSS

Or, you can determine if the user if hovering over the element using the CSS pseudo-class :hover, but you will probably want to use a <div> or a <span> instead of a <img>.

.hoverable {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: center url('https://i.stack.imgur.com/mJHTA.png') no-repeat;
  background-size: contain;
}

.hoverable:hover {
  background-image: url('https://i.stack.imgur.com/WwxRR.gif');
}

<a><span class="hoverable"></span></a>

JavaScript using data tags

Alternatively, you can associate the default and hover state with the element via data-* attributes.

You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.

let img = document.querySelector('#hover-img');

img.addEventListener('mouseenter', function(e) {
  img.setAttribute('src', e.target.getAttribute('data-hover-src'));
});
img.addEventListener('mouseleave', function(e) {
  img.setAttribute('src', e.target.getAttribute('data-default-src'));
});

<a>
  <img id="hover-img" alt="Delete image" width="100" height="100"
    src="https://i.stack.imgur.com/mJHTA.png"
    data-default-src="https://i.stack.imgur.com/mJHTA.png"
    data-hover-src="https://i.stack.imgur.com/WwxRR.gif" />
</a>

score 0 · Answer 3 · answered Nov 04 '19 at 13:25

0

a {
    background-image: url("https://i.postimg.cc/1RGh8PpK/static-delete.png")
}
a:hover {
    background-image: url("https://i.postimg.cc/1RGh8PpK/delete.gif")   
}

answered Nov 04 '19 at 13:25

Nitin Parmar

87
3

rest of the css you need to add here – Nitin Parmar Nov 04 '19 at 13:26
how to write it in tag – Stack Kiddy Nov 04 '19 at 13:28
above css you need to write in css file or in style tag – Nitin Parmar Nov 04 '19 at 13:42
Code only answers are generally considered low quality. Could you add an explanation to your answer. – Lemon Kazi Nov 05 '19 at 04:27

animated gif icon for button html

3 Answers3

JavaScript

CSS

JavaScript using data tags