Title: SUBMIT BUTTON STYLING
Last modified: October 5, 2020

---

# SUBMIT BUTTON STYLING

 *  [benhasler](https://wordpress.org/support/users/benhasler/)
 * (@benhasler)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/)
 * Hi there.
 * I really want to style the submit button (or the ‘verify your age’ button on 
   the attached link).
 * i want to be able to change size, colour etc and also have the text inherit the
   Headline font settings set in the theme.
 * is it also possible to set an internal key line around the button (so that it
   matches the text box on the logo a bit more?
 * also where would i add this css? to the theme settings or the css box in the 
   age gate settings?
 * many thanks
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fsubmit-button-styling-4%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 14 replies - 1 through 14 (of 14 total)

 *  Plugin Author [Phil](https://wordpress.org/support/users/philsbury/)
 * (@philsbury)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13493395)
 * Hi [@benhasler](https://wordpress.org/support/users/benhasler/),
 * I think you want something like this:
 *     ```
       input.age-gate-submit {
           border: 2px solid #fff;
           background: #000;
           padding: 20px;
           font-size: 20px;
           margin-top: 10px;
           transition: all 0.2s ease;
           outline: 6px solid black;
           font-family: 'Oswald';
       }
       ```
   
 * As for where to put it, that’s up to you really. If your theme’s CSS won’t get
   overwritten by updates put it in there, if it will, put it in the CSS editor 
   and you should be good.
 * Thanks
    Phil
 *  Thread Starter [benhasler](https://wordpress.org/support/users/benhasler/)
 * (@benhasler)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13493477)
 * that is perfect thanks.
 * one last thing. how can i then centralise the day, month and year boxes obove
   it?
 * its sitting off to the right currently?
 * thnaksso much for the speedy response
 *  Plugin Author [Phil](https://wordpress.org/support/users/philsbury/)
 * (@philsbury)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13493630)
 * Hi [@benhasler](https://wordpress.org/support/users/benhasler/),
 * Couple more bits of CSS for that:
 * This will sort the centred alignment
 *     ```
       ol.age-gate-form-elements {
           padding: 0;
       }
       ```
   
 * These bits are up to you if you use them or not;
 * Personally, I’d hide the D, M, Y, this will hide them visually but still be readable
   by screenreaders and the like:
 *     ```
       .age-gate-label {
         position: absolute; 
         overflow: hidden; 
         clip: rect(0 0 0 0); 
         height: 1px; width: 1px; 
         margin: -1px; padding: 0; border: 0; 
       }
       ```
   
 * Then this will just make the inputs a bit bigger:
 *     ```
       input.age-gate-input {
           background: transparent;
           color: #fff;
           font-size: 18px;
           height: 60px;
       }
       ```
   
 * Finally, this will make the placeholders (DD, MM, YYYY) a bit less intrusive:
 *     ```
       input.age-gate-input::placeholder {
           color: rgba(255, 255, 255, .5);
       }
       ```
   
 * Hope that all helps!
 * Cheers
    Phil
 *  Thread Starter [benhasler](https://wordpress.org/support/users/benhasler/)
 * (@benhasler)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13517849)
 * i have just spotted one thing. on mobiles there is a rounded corner thing going
   on on the submit buttons internal white border?? how do i get rid of that so 
   its square?
 * thanks so much
 *  Plugin Author [Phil](https://wordpress.org/support/users/philsbury/)
 * (@philsbury)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13521353)
 * Hi [@benhasler](https://wordpress.org/support/users/benhasler/),
 * Add these to the input styles:
 *     ```
       -webkit-appearance: none;
       border-radius: 0;
       ```
   
 * That should give you something like:
 *     ```
       input.age-gate-submit {
           border: 2px solid #fff;
           background: #000;
           padding: 20px;
           font-size: 20px;
           margin-top: 10px;
           transition: all 0.2s ease;
           outline: 6px solid black;
           font-family: 'Oswald';
           -webkit-appearance: none;
           border-radius: 0;
       }
       ```
   
 * Thanks
    Phil
 *  Thread Starter [benhasler](https://wordpress.org/support/users/benhasler/)
 * (@benhasler)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13521713)
 * phil you are a superstar.
 * thats perfect thanks
 * ben
 *  Thread Starter [benhasler](https://wordpress.org/support/users/benhasler/)
 * (@benhasler)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13550959)
 * hi phil, after all your help on the submit button the client has now changed 
   aged gate log in to a simple yes or no.
 * how do i apply those same styling setting to the yes and no buttons?
 * thanks so much.
 * ben
 *  Plugin Author [Phil](https://wordpress.org/support/users/philsbury/)
 * (@philsbury)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13551572)
 * Hi Ben,
 * The above should work with just a little adjustment I think:
 *     ```
       button.age-gate-submit-yes,
       button.age-gate-submit-no {
           border: 2px solid #fff;
           background: #000;
           padding: 20px;
           font-size: 20px;
           margin-top: 10px;
           transition: all 0.2s ease;
           outline: 6px solid black;
           font-family: 'Oswald';
           -webkit-appearance: none;
           border-radius: 0;
       }
       ```
   
 * Thanks
    Phil
    -  This reply was modified 5 years, 7 months ago by [Phil](https://wordpress.org/support/users/philsbury/).
 *  Thread Starter [benhasler](https://wordpress.org/support/users/benhasler/)
 * (@benhasler)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13551656)
 * thats great.
 * is there a way of making them the same width and reducing the height of them (
   so that are rectangular rather than square?
 * the yes one is currently a touch wider.
 * could we also increase the gap between the buttons slightly and make the text
   in caps?
 * thanks so much for all of your help phil.
 * kindest regards
 * ben
 *  Plugin Author [Phil](https://wordpress.org/support/users/philsbury/)
 * (@philsbury)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13551699)
 * Hi Ben,
 * Yup all possible, try:
 *     ```
       button.age-gate-submit-yes,
       button.age-gate-submit-no {
         border: 2px solid #fff;
         background: #000;
         padding: 10px 20px;
         font-size: 20px;
         margin: 5px 10px 0;
         transition: all 0.2s ease;
         outline: 6px solid black;
         font-family: 'Oswald';
         -webkit-appearance: none;
         border-radius: 0;
         min-width: 75px;
       }
       ```
   
 * Cheers
    Phil
 *  Thread Starter [benhasler](https://wordpress.org/support/users/benhasler/)
 * (@benhasler)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13551736)
 * that looks great although the Yes and No dont seem to be displaying in caps and
   same font as the ‘I’M OVER 18’ text?
 * am i missing something?
 *  Plugin Author [Phil](https://wordpress.org/support/users/philsbury/)
 * (@philsbury)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13551757)
 * Looks like something isn’t right on this line:
 *     ```
       font-family: 'Oswald';
       ```
   
 * Double check what you have and maybe remove the quotes it is continues to be 
   wrong.
 * Uppercase you need to add:
 *     ```
       text-transform: uppercase;
       ```
   
 * Cheers
    Phil
 *  [jumpteamco](https://wordpress.org/support/users/jumpteamco/)
 * (@jumpteamco)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13950813)
 * Hello Phil,
 * I am using the CSS you displayed for ben above
 * button.age-gate-submit-yes,
    button.age-gate-submit-no { border: 2px solid #fff;
   background: #000; padding: 10px 20px; font-size: 20px; margin: 5px 10px 0; transition:
   all 0.2s ease; outline: 6px solid black; font-family: ‘Oswald’; -webkit-appearance:
   none; border-radius: 0; min-width: 75px; }
 * But I was wondering if you could help with addressing the hover over the buttons
   currently it is hot pink and I cannot figure out how to change it. could you 
   please advise
 * thank you,
    Jazmin
 *  Plugin Author [Phil](https://wordpress.org/support/users/philsbury/)
 * (@philsbury)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13955731)
 * Hi [@jumpteamco](https://wordpress.org/support/users/jumpteamco/),
 * You’ll need to add styles for the hover state, e.g.
 *     ```
       button.age-gate-submit-yes:hover,
       button.age-gate-submit-no:hover {
         background-colour: #000; /* or your choice of color */
         colour: #000; /* or your choice of color */
       }
       ```
   
 * Thanks
    Phil

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘SUBMIT BUTTON STYLING’ is closed to new replies.

 * ![](https://ps.w.org/age-gate/assets/icon-256x256.png?rev=2783003)
 * [Age Gate](https://wordpress.org/plugins/age-gate/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/age-gate/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/age-gate/)
 * [Active Topics](https://wordpress.org/support/plugin/age-gate/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/age-gate/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/age-gate/reviews/)

 * 14 replies
 * 3 participants
 * Last reply from: [Phil](https://wordpress.org/support/users/philsbury/)
 * Last activity: [5 years, 4 months ago](https://wordpress.org/support/topic/submit-button-styling-4/#post-13955731)
 * Status: not resolved