Added: 20th of May 2021
Viewed: 131 times
If anyone remembers Macromedia Dreamweaver, which was a WYSIWYG HTML editor and how I first learned to created basic websites, it shipped with a function to create animated rollovers. It was quite involved, It wasn't pretty but it got the job done. If you wanted to create an animated arrow, you needed to created two .gif files.
Since the introduction of CSS3, it now even easier to create animated links.
With only a few lines of code and one .png image, combined with the CSS transform rotate property, we can rotate an arrow 90° when the users hovers over it.
Please copy and paste the code below. Right click and save as the arrow to your desktop.
Other Tips & Tutorials
CSSCSS keyframes animation, move text around the screen in a square path
Posted: 2nd of June 2021
CSSCSS animation, rotate image 90 degrees using transform rotate
Posted: 20th of May 2021
CSSAlternating div background colours using CSS
Posted: 9th of April 2021
CSSHow I created rounded boxes in the early days of the web using HTML tables and Photoshop
Posted: 6th of March 2021
CSSUsing CSS grids to create a simple grid layout
Posted: 10th of April 2020
CSSSimple CSS responsive menu for websites and mobile devices
Posted: 26th of January 2016