Duda Tip: Custom Buttons - Adding Your Own Icon

Blog Layout

Duda Tip: Custom Buttons - Adding Your Own Icon

Dec 04, 2023

Button

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!

Pre-requisite

We recommend you have an icon SVG ready to go in the two colors you want to use. You can download free icons at https://www.flaticon.com/. Since these icons are images, the icon's colors are fixed. You'll need to change the color first on an image editing software like Photoshop/Illustrator or a free site like https://boxy-svg.com/ before uploading them to the media manager. Once you have them, upload them to the media manager. We will use them later in the tutorial.

Step 1. Add a Button Widget.

Add a button by dragging a button widget to your row.

Button

Step 2. Add the classes to your button

Right-click the button and edit HTML/CSS.

Button

Add the classes "white" and "red"

Button

In this example, we've used 2 classes:

white: This class will be the content placeholder for the default icon.
red: This class will be the icon once the button is hovered.

Step 3. Add the classes to the site's CSS.

Go to dev mode, and under site.css, paste the code snippet below.

:is(.white,.red ) span.text:before{

content: '';

position: absolute;

left: unset;

top: 15px; /* change the value if necessary to achieve your desired icon position */

right: 25px; /* change the value if necessary to achieve your desired icon position */

width: 25px; /* change the value if necessary to achieve your desired size */

height: 25px; /* change the value if necessary to achieve your desired size */

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: 50% 50% !important;

z-index: 1;

}

.white span.text:before {

background: url(https://irp.cdn-website.com/3239fcce/dms3rep/multi/arrow-white.svg);

}

.red:hover span.text:before {

background:url(https://irp.cdn-website.com/3239fcce/dms3rep/multi/arrow-red.svg);

}

Button

NOTE: You will need to replace the URLs under white and red by getting the links of the icons you want to use. You can get the links by clicking "Get Image URL" on the top left and clicking the name of each selected icon you want to use. You can also change the values here to change the icon's size and positioning.

Button

Button

Step 4. Save and close.

Style as you wish! And there you have it, the beginning of your custom buttons. Don't miss our next Duda tip where we will take you through the process of adding an offset custom hover animation if you'd like to try a different hover animation!

Button

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 - Elevated Hover Animation

08 Jan, 2024

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!

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!