Duda Tip: Custom Buttons - Elevated Hover Animation

Blog Layout

Duda Tip: Custom Buttons - Elevated Hover Animation

Jan 08, 2024

Button

Ready for part two? Now that we have a custom button, let's add a more creative custom hover animation! Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Step 1. Styling the Background Button

Select your button, and make sure you have any layout selected except the one with the icon.

Button

Button

Remove the background color and add a 1px border. Make sure the "Border" and the "Hover border color" are the colors you'd like.

Button

Step 2. Add the CSS code to the site.

Go to site.css under developer mode and paste the following code.

.offsetButton span.text {

background: #A50000; /* change the value to achieve your desired background color */

transition: all ease 0.3s !important;

height: 100%;

width: 100% !important;

vertical-align: middle;

display: flex !important;

flex-direction: column !important;

justify-content: center !important;

max-width: 100% !important;

transform: translate(0px, 0px);

padding: 0px 10px !important;

border-radius: inherit;

}

.offsetButton:hover span.text {

transform: translate(-10px, -10px); /* change the value to achieve your desired offset position */

transition: all ease 0.3s !important;

}

.offsetButton.dmWidget:after {

display: none !important;

}

Remember to change the color of your button or the type of offset while you are working in developer mode.

Change the background color to any desired color by changing the "background" color in the code.

background: #A50000;

Change the offset position to your desired offset position by changing the values under "transform".

Here's a reference for a better understanding of axis rotations.

transform: translate(-10px, -10px);

Button

Step 3. Add the Class to Your Button.

Right-click your button and edit HTML/CSS. Add our "offsetButton" class, and hit update.

Button

Step 4. Update the Button's Text if Needed.

There you have it- a fully custom button you can use throughout your site. Try it out and show us what you create!

Button

< Older Post Newer Post >

test

Duda Tip: Custom Button - Icon Hover Animation

08 Mar, 2024

Have you enjoyed the last two Duda tips but want a more subtle yet creative hover animation to use on your custom button? If so, you are at the right place. In this Duda tip, we will go through the steps of changing the hover action we had in our first Custom Button Duda Tip to one that is a subtle animation for our third and final way of creating a custom button. Follow along with the instructions below to implement this Duda tip on your site or check out this video to watch each step in real time.

Duda Tip: Custom Buttons - Adding Your Own Icon

04 Dec, 2023

Need your website to stand out with subtle custom touches? Custom buttons might be the answer! In this step-by-step tutorial, we will take you through the process of adding a custom icon to your buttons which is the beginning of your very own custom buttons. Learn how with the easy steps below, or check out this video to watch each step in real time. Let's get started!

Duda Tip: Add Visual Emphasis to Text

03 Nov, 2023

Welcome to another Duda Tip! Today we will show you a simple and easy trick to add visual interest to your website's text by adding a custom underline. This technique can help you emphasize important sections of copy and increase the overall visual interest of your site. We used this tip in the recent redesign of Taylor's Educational Enrichment Foundation and by following these step-by-step instructions or the video below, you will be able to as well, adding creative emphasis to headers or text on your website in no time. So, let's dive in and get started!

Duda Tip: Adding a Hover Effect

13 Oct, 2023

In this Duda Tip, we will show you how to create a hover effect! If you want to add interactive flair to your website, a hover effect is a must-do. It can help you highlight crucial information or make your site more visually appealing by aiding user interaction. Check out how with the easy steps below, or check out this video to watch each step in real time.

Duda Tip: Adding Icons to Form Fields

31 Jul, 2023

Today, we are going to step up our game when it comes to forms. Check out the finished form at Rotary Control Lawn Services . There you will find a custom form that includes added icons in each form field to improve the overall user experience. This small but significant change makes it easier for users to understand and navigate the form fields. Here’s how the customized form looks on their site after adding the icons:

Duda Tip: Creating a Custom Shape Hero

16 Jun, 2023

Designing a well-structured and visually appealing hero is key to welcoming your website visitors. Located at the top of the visual hierarchy, the hero section of your website is the first visual element your visitors see, which is why we should make it as visually appealing as possible, and that is where this Duda tip comes in. We will walk you through a few simple steps to create a custom hero shape to visually enhances your hero section and perfectly complement your Duda site, just as we did for our client Assurecare Advisors . Their final result looked like this:

Duda Tip: Creating An Overlapping Logo

16 May, 2023

You’ve worked hard to customize your business’s brand, so your logo should stand out on your website! If you’re looking for a way to make your logo pop, allow it to overlap the header behind it. It draws the attention of every website visitor — and with Duda, it’s simple to do! We used this tip to design the Nate’s Hot Chicken website header. Want to do the same for your own site? All you’ll need is a proportional version of your logo (60x60, for example) and a static header. Let’s get started! You can follow the instructions below to implement this Duda tip on your site, or check out the video below to watch each step in real time.

Duda Tip: Adding a Journey Element

17 Apr, 2023

Want to walk your website viewers through a step-by-step process? Adding a journey element to your site with DudaFlex can make your instructions seamless and simple — and the process will look good, too! This design element is a great way to highlight your services at a high level and help new clients know what to expect when they work with you. Our client True North Restoration used this Duda Tip to walk potential customers through their company process. Their final result looked like this:

Duda Tip: Adding Custom Image Shadows to Your Site

16 Mar, 2023

Want to add character to your website design? Add visual interest by making visual elements pop off the page! When Asher House wanted to highlight a few images on their home page, we knew a custom image shadow would do the trick. Custom image shadows draw attention to certain elements by creating an elevated look. Elevation creates visual hierarchy, drawing the eye to specific sections of a page first. How can you use “elevation” to your advantage on a flat screen? Well – elevation is defined as the relative distance between two surfaces on a z-axis. When we layer two images on top of one another, the distance between them appears to be zero. But when we add shadowing, we gain the illusion of dimension – proving once again that good design is like magic.

Duda Tip: Showing Page Scroll Progress

16 Feb, 2023

If you have a website page that’s on the longer side, it can be helpful to show viewers where they are in their scroll! The simplest way to do this: display a progress bar. It adds visual interest to your site, and it gives readers an important reference point as they move below the fold. With Duda, this is an easy addition — the Dear America Foundation created one that highlights their brand colors. Today, we’re here to show you how to show page scroll progress on your site. Follow the instructions below to implement this Duda tip on your site, or check out this video to watch each step in real time!