If you were browsing the web circa 1998, splash pages were everywhere. Flash-powered intros with dramatic music, spinning logos, and “Welcome to our website!” animations were a standard part of the design process. Those days are long gone, but they haven't vanished entirely. Brands still use splash pages for age verification, country and language selection, or simply to create a bold first impression.
Step 1: Draw a Frame and Insert a Video
Begin by drawing a frame, which will serve as the background of your button. You can resize the frame and round the corners to your liking. Once you have your frame, insert a video and scale it up to the width of your button. Drag the video into your frame and upload it.
Step 2: Add Text and Style Your Button
Next, add text and an icon to your button. Style it however you want. With both the text and icon selected, hit ⌥ +⌘+ ⏎ to add a stack. Then drag the stack into the frame. To make your text more readable, lower the video's opacity a little bit.
Step 3: Create a Component
Select your button and create a component. Add a variant, and up the video opacity back to 1. Add a pointer cursor to the primary variant. Finally, link up the variants using "mouse enter/leave."
Step 4: Add a Hover Effect (Optional)
You can stop here, but if you want to add an extra touch of flair, you can add a hover effect. Select your button component and add an overlay. Style it however you want, then drag in another video block. Resize the video block, round the corners, and upload the same video you used for the button.
Step into the future of design
Join thousands using Framer to build high-performing websites fast.
