Comments on: How to create a beautiful Divi button

By: Mark Hendriksen

Mark Hendriksen — Mon, 13 Jun 2022 05:05:23 +0000

In reply to Jeff.

Hi Jeff,

Try this CSS snippet instead of the given one:

.custom_button_3 .et_pb_button {
background-color: #0149CC; /* Change this color to your own */
background-image: linear-gradient(to right,#0149CC,#00C6FF,#0149CC); /* Change this color to your own */
display: inline-block !important;
cursor: pointer;
position: relative;
transition: color 0.35s ease, background-position 0.3s ease-in-out,
background-color 0.35s ease, box-shadow 0.3s ease-in-out;
z-index: 1;
overflow: hidden;
background-size: 200% 100%;
background-position: 0 0;
}

.custom_button_3 .et_pb_button:hover {
box-shadow: -0.25em 0.25em 2.25em rgba(0,0,0,0.35);
background-position: 100% 100%;
}

By: Jeff

Jeff — Sat, 11 Jun 2022 15:58:34 +0000

I would love to incorporate the custom_button_3 in to my new website, but I’m not sure how to do this for the submit button in a Divi Contact Form or (like jrockoford) within a plugin.

Can you help?

By: Mark

Mark — Fri, 30 Nov 2018 16:07:17 +0000

In reply to jrockoford. Ahh ok I see, the CSS code in my examples will not be enough you have to write some more CSS to make it work. Unfortunately I don't have full button CSS snippets ready. Otherwise I would give them to you.

By: jrockoford

jrockoford — Fri, 30 Nov 2018 15:51:05 +0000

Yes, I am. But I want to modify a button that’s used with a plugin. The plugin works with shortcodes so the only way to modify the button and create something as satisfying as the buttons you created is to use the plugin button class and include all the code as CSS. I can’t insert a button module. Hence the complication.

By: Mark

Mark — Fri, 30 Nov 2018 08:45:10 +0000

In reply to jrockoford. Hi, Are you not you working with Divi?

By: jrockoford

jrockoford — Thu, 29 Nov 2018 23:33:40 +0000

I can’t use a button module. Is it possible to just use CSS for everything?

By: Mark

Mark — Fri, 23 Nov 2018 08:22:42 +0000

In reply to Kristine Karen Cotterman.

Hi Kristine,

If you go to the buttons advanced tab > Custom CSS > Main element

And place the following CSS:

width:50% !important;

You can cjabge the %number to whatever you like

By: Kristine Karen Cotterman

Kristine Karen Cotterman — Sat, 17 Nov 2018 08:13:30 +0000

How can I set all the buttons to be the set width?

By: bounzou sami

bounzou sami — Fri, 18 May 2018 13:35:07 +0000

thank u its verry good !

By: Ildikó

Ildikó — Sun, 22 Apr 2018 12:38:57 +0000

In reply to Mark. Yes, I did.