How to design a button in three different html codes?

[clausfaber]

Hi there, I would be grateful for your help - I can’t manage with my knowledge.

I have a Wordpress system with divi, and two more plugins. They all have buttons. They all behave differently. The trouble is though: I can’t change the HTML code the plugin uses - it would mess up a great many things, as I am not in PHP plugin programming.

I can use CSS to make them look and behave differently. Unfortunately, divi uses “div” and “a”. The forms plugin uses “button”, and the newsletter plugin uses “input type=submit”. How can I make them all behave like in divi?

The HTML for divi is:

<div class="et_pb_button_module_wrapper et_pb_button_0_wrapper  et_pb_module ">
	<a class="et_pb_button et_pb_button_0 et_pb_bg_layout_light" href="https://clausfaber.net/beratung/">Interessiert mich ...</a>
</div>

And the css for divi is:

.et_pb_button {
    color: #ef4128;
    background-color: rgba(255, 255, 255, 0.35);
    border-width: 1px !important;
    border-radius: 0px;
    transition: all 300ms ease 0ms;
    font-size: 20px;
    font-weight: 500;
    padding: .3em 1em;
    line-height: 1.7em !important;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 2px solid;
    transition-property: all !important;
}
.et_pb_button>a {
    display: inline-block;
    vertical-align: middle;
    font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
    position: relative;
}

.et_pb_button:after {
    font-size: 32px;
    color: #ef4128;
    line-height: 1em;
    content: "\35";
    opacity: 0;
    position: absolute;
    margin-left: -1em;
    text-transform: none;
    font-feature-settings: "kern" off;
    font-variant: none;
    font-style: normal;
    font-weight: 400;
    text-shadow: none;
    font-family: ETmodules !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
}

The HTML for the contact form is:

<button type="submit" name="wpforms[submit]" id="wpforms-submit-2906" class="wpforms-submit" data-alt-text="Senden ..." data-submit-text="Thema vorschlagen" aria-live="assertive" value="wpforms-submit">Thema vorschlagen</button>

Finally, the HTML for the newsletter form is:

<input class="tnp-submit" type="submit" value="abonniere ich..." style="">

The tricky part is the :after part (an arrow pointing to the right), displayed on hover. I can’t get that to work. Is there any way to do this?

You can see it live on https://clausfaber.net/werkstatt.

Many thanks in advance, Claus

[robheyays]

Hello, for hover your looking at something like .hover in css .
a:hover {
background-color: yellow;
} To address the rest of your problems with divi your probably not going to be able to override this plug in. Good luck

[clausfaber]

Des the “input:submit” and the “button” property take an ::after? I could not make it work yet.

[robheyays]

You may need to add the *:: code if you havent already, of course some of the code gets deleted.

*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
This is just an example but its probably better change everything instead.

[lasjorg]

You can’t really use a pseudo-element for void/empty elements as they have no content. I guess technically an input element does accept the ::placeholder pseudo-element.

Both ::before and ::after creates an element inside the targeted element.

<div>
 ::before
 some div content
 ::after
</div>

You can use the button container of the form element and create the pseudo-element on that.

---

This is pretty messy, but it might work. You should also remove the ::after element styles you added to the input element.

/* button container */
.tnp-field.tnp-field-button {
  position: relative;
  width: fit-content;
}
/* button container ::after pseudo-element */
tnp-field tnp-field-button::after {
  font-size: 32px;
  color: #ef4128;
  line-height: 1em;
  content: "\35";
  opacity: 0;
  position: absolute;
  margin-left: -1em;
  text-transform: none;
  font-feature-settings: "kern" off;
  font-variant: none;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  font-family: ETmodules !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  /* position the arrow */
  top: 50%;
  transform: translateY(-50%);
}

/* set opacity on ::after on button hover */
.tnp-field.tnp-field-button:hover::after {
    opacity: 1;
}

/* set padding-right on input on button hover */
.tnp-field.tnp-field-button:hover input.tnp-submit {
    padding-right: 30px !important;
}

This isn’t really the code you would want to use. It is just using the selectors already created and was made in the browser. But with other people’s WordPress it is kind of hard to do anything clean. I’m sure you can clean it up somehow.