This document aims to help domestic users learning Framer who struggle with the lack of Korean materials by translating official blog content into Korean and adding practical information. We hope it provides some assistance to Framer users.

The new video button on Framer's homepage has recently gained significant popularity. It's a cool feature that adds a cinematic feel to websites. In this tutorial, we'll show you how to create your own cinematic video button in Framer.

Creating a Cinematic Video Button

1. Insert Frame and Video

First, draw the frame that will serve as the button's background. Adjust the frame size and round the corners as desired. Then insert the video and scale it to fit the button's width. Next, drag and upload the video into the frame.

2. Styling Text and Button

Next, add text and icons to the button. Style them as desired. Select both the text and icons, then press ⌥ + ⌘ + ⏎(Mac) / ctrl + alt + ⏎(Windows) to add a stack. Drag the stack into the frame. To improve text readability, slightly reduce the video opacity.

3. Creating the Component

Select the button and create a component. Add a new variant, then set the video opacity back to 1. Add a pointer cursor to the default variant. Finally, use "mouse enter/leave" to link the variants.

4. Adding Hover Effects (Optional)

You can stop here, but if you want to add special effects, you can include hover effects. Select the button component and add an overlay. Style it as you like, then drag and drop another video block. Adjust its size and round the corners, then upload the same video used for the button.

Try following the project→

This article is a translated and adapted content from Framer's official blog, ‘How to create a cinematic video button in Framer’.