-
Posts
-
The generic styling for buttons is different than the styling of the buttons created via shortcode, which can look strange when used together.
An example of this can be seen in my sidebar here: http://aaacampus.aaa.biz/e-learning/
The top login area uses a flat button, as well as the bottom contact form, but I used a button shortcode for the ‘join the mailing list’ section in the middle, so they don’t match.
Is there a way to create the flat style buttons via shortcode? Either that or change the flat button style universally to make all buttons have gradients/rounded corners site-wide?
Thanks,
Tom
Hi,
Please add this on your custom.css.
input[type="submit"] {
border-radius: 3px;
background-image: url(../images/layout/bg-button.png);
background-repeat: repeat-x;
background-position: 0 0;
padding: 10px;
font-size: 12px;
text-decoration: none;
display: inline-block;
border-style: solid;
border-width: 1px;
margin: 3px 0;
line-height: 1.2em;
position: relative;
font-weight: 600;
text-align: center;
max-width: 100%;
}Cheers,
Ismael
Hey Ismael,
Thanks for the response, I had to change the directory path a bit, but that worked for the most part. The only issue now is that the hover states are different. Is there a way to make those consistent as well?
Thanks,
Tom
Hi,
Please add this.
.main_color input[type="submit"]:hover {
border-color: #E1E1E1;
background-color: #073E8A;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
color: white;
}Cheers,
Ismael
Hey Ismael,
Unfortunately after adding the code, the only thing that changes on hover is that the border changes to white, which does not match the other buttons. Please advise.
Thanks,
Tom
Hi,
The code works on my end.
I cannot load your website. I want to check the buttons furthermore.
Regards,
Ismael
Hey Ismael,
The website is working, I’ve left the code as you supplied it so you can see what it’s doing: http://aaacampus.aaa.biz/e-learning/
Thanks,
Tom
Kriesi uses following code for the hover effect:
body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover{
color:#fff;
color: rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}Based on the code above I’d use following code:
.main_color input[type="submit"]:hover{
color:#fff;
color: rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}Hey Dude,
Unfortunately this code does not work either as it makes the whole button change color and the text dark grey. Please advise.
Thanks,
Tom
Hi,
Please edit the text widget that contains that form and change the line that says
<input type="submit" value="Login" name="LOGIN" onclick="submitForm(this); return true;">to look like this
<input class="avia-button avia-icon_select-no avia-color-theme-color avia-size-large avia-position-center avia-button-wrap avia-button-center avia-builder-el-6 avia-builder-el-no-sibling" type="submit" value="Login" name="LOGIN" onclick="submitForm(this); return true;">Now add the css below to your /css/custom.css OR to quick css located in Enfold > Styling Layout to the text box at the bottom of the page
.main_color .button:hover, .main_color .ajax_controlls a:hover, .main_color #submit:hover, .main_color .big_button:hover, .main_color .contentSlideControlls a:hover, .main_color #submit:hover, .main_color input[type='submit']:hover {
background-color: #073E8A;
border-color: #073E8A;
}Thanks,
Nick
Hey Nick,
Thanks for the reply. The ‘Login’ button is now styled correctly on hover, although the ‘Send’ button for the contact form at the bottom of the sidebar does not have a hover state anymore. Is there a way to add the same hover state to that?
Thanks again,
Tom
Hi,
For the lower button and for any future buttons you may encounter, what you do is you take the <input tag that contains type=”submit” , that is standard html syntax for a button. and inside you find the class=”some code” , in your case for button on bottom which is also inside a widget, your code is
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit">and then you add the following at the end of the class=”wpcf7-form-control wpcf7-submit” , inside the last quote, without touching what was already inside
avia-button avia-icon_select-no avia-color-theme-color avia-size-small avia-position-center avia-button-wrap avia-button-center avia-builder-el-6 avia-builder-el-no-siblingso that your end result for this particular case will be
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit avia-button avia-icon_select-no avia-color-theme-color avia-size-small avia-position-center avia-button-wrap avia-button-center avia-builder-el-6 avia-builder-el-no-sibling">And this is what you will use to replace the button inside the widget
Thanks,
Nick
- The topic ‘Button Inconsistencies’ is closed to new replies.