The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Form Submit Button :before & :after

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #36396


    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 .= '';

    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.


    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.