Divi Golden Button

Tutorial

This tutorial will show you how to create a Golden Button for your Divi Theme WordPress website. The Divi theme 2020 don’t have the features to create an gradient with more than 2 stop color. With this tutorial you will learn how to apply a CSS gradient with more than 2 stop color. With this technique you will not only create golden color background but you can create all other metallic gradient you want

This is how to create a Divi Golden Button. The button color will be created with a CSS color background. To make the Golden color unique I will grab the hex colors from an image.

1. Search for an image with golden item on the internet and then download en import the image in your design program.

2. Use your eyedropper tool to grab the colors of the gold area in your image. We need to pick 5 colors to make an 9 stops color gradient. Pick the color from the dark part to the light part of the gold image with your i dropper.

3. Use your Gradient tool to make a gradient of 9 stops colors.
If you are satisfy you can use the hex # colors of the gradient.

4. Go to CSSMatic.com and click on the CSS generator button.
Make 9 stops with the same hex colors you use in your design program.

5. When you done, just copy all the code that the website have generate.

6. Login to your Divi website and paste the CSS code in the “Custom CSS”.
You can find the “Custom CSS” under the WordPress menu Divi> Theme option> General> Custom CSS.

7.  Now we gonna create the button.
Enable the “Visual builder” and make a text module.  Type the text of your button and insert a button link.

8. Change the Text “Visual tab” to  “Text tab”. Now make a class for your text.
I use: class=”golden-button” you can use your own class name like: class=”great” .

 

9.  Go to your Custom CSS and put the same class name for your text CSS.This is the CSS I use to design the button.

.golden-button {
line-height: 85px;
font-size: 25px;
color: black;
border: 2px solid;

border-radius: 0px;
padding: 10px 25px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;}

border-image: conic-gradient (use the hex color from your design app) 1;

background: (the generated golden gradient code of CSS Matic)}

I will also use some CSS to create the hover effect.

.golden-button:hover {
color: Black;
box-shadow: 5px 5px 5px black;
Background: (the generated golden gradient code of CSS Matic)}
Save your Custom CSS and check how your text transform into a golden button.

10. Congratulation! Your Golden button is done.

#DiviTheme #GoldenButton #DiviTutorial #WordPress 

Golden Graphic Tutorial

by 4GArt Team

Before your start with your CSS gradient button, you must watch this tutorial. This is about how to create a golden graphic.

The reason why I recommend you to watch this, is because it will give you a understanding how the gradient works. It’s also give you a idea how it will look before you apply your gradient. When you are done, just copy the hex color and use them in  your CSS code.

I will put tutorial about how to apply CSS in your Divi Theme.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Select your currency
EUR Euro
USD United States (US) dollar