SUBMIT BUTTON STYLING

Hi @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

Hi @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

Hi @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