Jump to content
  • 0

Align Buttons


telly
 Share

Question

5 answers to this question

Recommended Posts

  • 0

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: 


image.png.8cc4372fe0329bd8b4f3ee0e9af9562f.png

Link to comment
Share on other sites

  • 0

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;
}

Link to comment
Share on other sites

  • 0
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();

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...