Form Submit Button :before & :after

[Danielle]

Hello,

I have a button HTML/CSS button that uses :before and :after. It works perfectly!

Your text to link…

I want to make the PHP/CSS form submit button look the same.

Originally, I thought it would be as simple as added the :before & :after to id=”aiContactSafeSendButton”.

However, the div will not accept :before & :after. Hmm..Then I added a class to the PHP (scary, I guessed) and the class displays but the style with the :before & :after do not display.

How do I get the form’s submit button to display as the HTML/CSS button? What am I missing?

$this->buttons = '
';

$this->buttons .= '';

$this->buttons .= '';

$this->buttons .= '';

$this->buttons .= '';

if ($this->back_button) {

$this->buttons .= '';

[dfogge]

what you are missing is the fact that there is a difference between an actual input button and a link that is styled to look like a button.

on the actual button (and any input element really) you cannot apply :before or :after, but i think this may be solvable by wrapping the input button in a span or div and placing the content you wished to generate from the CSS directly into the markup.

[Danielle]

After days of trying multiple approaches here is what finally worked.

I added a div=”test3″ class=”arrow22″ to the php; to wrap the button as suggested. Then used .arrow22:before to style the pop out arrow and then made the input button transparent. Phew ….thanks for the assistance.

Final Product

Thank you!

[Author]

Posts