Align Buttons

[telly]

Hi -Need help to align my button Choose Again and Submit Button:



 

[SunakoChan]

What I suggest is to hide the Button login, then add an HTML block and put there the button "Register" and "Log in".

Follow the steps below to achieve the workflow:

To hide the button "SUBMIT"
1. Add Header and footer
2. Disable the HTML editor on the advance tab
3. Paste the CSS code below:

<Style>
.cbSubmitButton{
Display: none !important;
}
</style>

To create a button for "Choose Again" and "Submit"
1. Add HTML block
2. Disable the HTML editor on the advance tab
3. Paste this code below:

<input type="submit" name="Submit" id="Submit_31ebd6b06e1f47" value="Submit" class="StyleButton">
<a href="REDIRECTION LINK"><button class="StyleButton">Choose Agin</button></a>
 

Here is the expected result: 

[telly]

Hi @SunakoChan- Thank you for that, but can you provide me also the style of the Submission button?

[SunakoChan]

Hi - for that just add this CSS and add class="StyleButton" on the Buttons.

.StyleButton{
    color: #FFFFFF;
    font-size: 12px;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    min-width: 120px;
    padding: 7px 16px;
    margin: 0px 3px;
    display: inline-block;
    background: #3186ad;
    border: none;
}

.StyleButton:Hover{
    color: #FFFFFF;
    font-size: 12px;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    min-width: 120px;
    padding: 7px 16px;
    margin: 0px 3px;
    display: inline-block;
    background: #474e53;
    border: none;
    cursor: pointer;
}

[kpcollier]

Any idea how to hide the Submit button on mobile devices?

[Glitch]

On 7/20/2019 at 3:51 PM, SunakoChan said:

 <input type="submit" name="Submit" id="Submit_31ebd6b06e1f47" value="Submit" class="StyleButton">
 <a href="REDIRECTION LINK"><button class="StyleButton">Choose Agin</button></a>
 

I think there can be an easier way here. If you're using the same style as the buttons, might as well hide the ID instead of the class, so you can use the class when creating the button.

You can hide the ID of the element, something like this:

input[id^='Submit']{display: none !important;}

so you can create this button>

 <input type="submit" name="Submit" value="Submit" class="cbSubmitButton">
 <a href="REDIRECTION LINK"><button class="cbSubmitButton">Choose Again</button></a>

 

This would work the same, just avoiding that extra effort to restyle the button. ❤❤

@kpcollier, when you put in the code> display: none, this should hide the button. If you are using responsive code, you may want to add this piece of code inside the media query. Maybe that will help. 

 

Glitch();