Icons Animation
<!DOCTYPE html> <html> <head> </head> <body> <button class="star-btn" aria-pressed="false"> <svg class="star-icon" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"> <path d="M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9L5.7 21l1.7-7-5.4-4.7 7.1-.6L12 2Z" fill="none" stroke="currentColor" stroke-width="1.5"/> </svg> Favorite </button> <style> .star-icon { transition: transform 0.2s ease, color 0.2s ease; color: #999; } .star-btn:hover .star-icon, .star-btn:focus-visible .star-icon { transform: scale(1.15); color: #f5a623; } </style> </body> </html>