To create a wipe effect for a button color change on Webflow, you can use CSS transitions and pseudo-elements to achieve the desired effect. Here's a step-by-step guide on how you can create a similar effect to the "Our Story" button:
1. Start by adding a button element to your Webflow project. Give it a class name for easier styling.
2. Go into the Designer panel and select the button element. In the Styles tab, open the "Background" section and set the initial background color for the button.
3. Next, open the "Transitions" section, click on the "+" button to add a new transition, and set the properties to transition the background color. For example, you can set the duration to 0.5s and the easing to "ease-out".
4. Now, scroll down to the "Custom Code" section in the Designer panel. Click on the "Head" tab and add the following CSS code:
```css
.button-class-name {
position: relative;
overflow: hidden;
}
.button-class-name::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: new-color;
transition: all 0.5s ease-out;
}
.button-class-name:hover:after {
left: 0;
}
```
Make sure to replace "button-class-name" with the actual class name you assigned to your button, and "new-color" with the color you want to transition to.
5. Lastly, adjust the timing and easing values as needed to match the desired effect. You can also customize the pseudo-element (`::after`) appearance, such as adding additional CSS properties or animations.
After following these steps, preview your site or publish it to see the wipe effect in action when hovering over the button. The pseudo-element is used to create an overlay with the new color that transitions from left to right, giving the illusion of a wipe effect.
Remember, you can further customize the effect by playing around with different CSS properties, such as opacity or transform, to achieve different transition styles.