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.

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