Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    It looks like that site is displaying two icons in each button, in slightly different positions, and has a transition on hover, and is also changing the background color slightly on hover. I’m not sure why the duplicate icons–you could experiment with dev tools in your browser of choice and see about adjusting the icon position (may require a slightly modified approach as those buttons appear to use absolute positioning and Scriptless does not), and adding the same kind of transition. Experimenting through dev tools is really the easiest approach to take, I think.

    Thread Starter callaloo

    (@callaloo)

    Thanks for taking the time to look at it. I tried using dev tools for some time, even forcing states like hover and I found it is not worth the inconvenience. Thanks for trying though. I am looking for a way to make the icons a bit interactive on hover. But maybe you can advise on this. On my other icons not managed by this plugin (they are in SVG format), I use this CSS to rotate them to 360 degrees on hover. Tried it with your plugin’s icons but it did not work. Is there a way to do it? Or I’m I assigning the wrong class? I would like only the icon on the inside to rotate on hover but the button to remain intact.
    -webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)

    Plugin Author Robin Cornett

    (@littlerchicken)

    You maybe need a transition-duration added (ref), as an instantaneous 360 degree rotation will look like nothing has happened at all. Adding a duration in dev tools gave me a spinning icon, although some were less noticeable than others due to being circular.

    Thread Starter callaloo

    (@callaloo)

    That solved it! Awesome! Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Transition’ is closed to new replies.