Shine - Free

Apply to a frame separate from your button frame
Place that frame inside your button stack or frame
Set the frame holding the effect to absolute position
Set 0 pixels on all sides to ensure scaling or set to relative 100%
You may need to change the Z-index of text to ensure it appears behind the effect

Code Preview

import React, { useState } from "react"
import type { ComponentType } from "react"
import { motion } from "framer-motion"
import styled from "styled-components"

const IconWrapper = styled(motion.div)`
  

  &:after {
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transform: rotate(0deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.13) 77%,
      rgba(255, 255, 255, 0.5) 92%,
      rgba(255, 255, 255, 0.0) 100%
    );
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.2s;
    transition-timing-function: ease;
  }

  &:hover:after {
    opacity: 1;
    top: -30%;
    left: -30%;
  }
`

export function withShineIconEffect(
    Component: React.ComponentType,
    background: string
): ComponentType {
    return (props) => {
        const [hovered, setHovered] = useState(false)

        return (
            <IconWrapper
                background={background}
                {...props}
                onMouseEnter={() => setHovered(true)}
                onMouseLeave={() => {
                    setHovered(false)
                }}
                style={{
                    "--shine-opacity": hovered ? 1 : 0,
                }}
            >
                <Component {...props} />
            </IconWrapper>
        )
    }
}

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.