Altitude Pro button issues

[SimplyAA]

Hi there. I have a strange thing happening in the Altitude theme. I'm using the buttons, just like in the theme instructions and they look great but when you hover on them the button expands and looks strange. It doesn't do this on the theme demo and I copied the code they gave.

My site isn't live but here is the code I'm using: <a class="button" href="http://johnsonlapham.com/contact">Free Consultation</a>

and I also tried: <p style="text-align: center;"><a class="button" href="http://johnsonlapham.com/contact">Free Consultation</a></p>

Since the site isn't live I did a screen shot of before you hover over button here: http://www.loveasimplelife.com/temp/button1.png and one that shows it expanding when hovering over it here: http://www.loveasimplelife.com/temp/button2.png.

It does this in all different areas and I didn't change any css that came with the theme.

Here is the css that came with the theme:

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.widget .button {
	background-color: #22a1c4;
	border: 2px solid #22a1c4;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 2px;
	padding: 15px 25px;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	white-space: normal;
	width: auto;
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button.clear:hover,
.button:hover,
.footer-widgets button,
.footer-widgets input[type="button"],
.footer-widgets input[type="reset"],
.footer-widgets input[type="submit"],
.footer-widgets .widget .button,
.widget .button:hover,
.widget .button.clear:hover {
	background-color: #000;
	border: 2px solid #000;
	color: #fff;
}

.button {
	display: inline-block;
}

.widget .button.clear {
	background-color: transparent;
	border: 2px solid #000;
	color: #000;
}

button:disabled,
button:disabled:hover,
input:disabled,
input:disabled:hover,
input[type="button"]:disabled,
input[type="button"]:disabled:hover,
input[type="reset"]:disabled,
input[type="reset"]:disabled:hover,
input[type="submit"]:disabled,
input[type="submit"]:disabled:hover {
	background-color: #ddd;
	border-color: #ddd;
	cursor: not-allowed;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
	display: none;
}

/* Buttons
--------------------------------------------- */

.image-section .button {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 20px;
}

.image-section .button.clear {
	border-color: #fff;
	color: #fff;
}

.footer-widgets button:hover,
.footer-widgets input:hover[type="button"],
.footer-widgets input:hover[type="reset"],
.footer-widgets input:hover[type="submit"],
.footer-widgets .widget .button:hover,
.image-section button:hover,
.image-section input:hover[type="button"],
.image-section input:hover[type="reset"],
.image-section input:hover[type="submit"],
.image-section .widget .button:hover {
	background-color: #fff;
	border: 2px solid #fff;
	color: #000;
}

Thanks for any assistance

---

Angela

[Davinder Singh Kainth]

Few things that you can try:

1. Add width: auto to "button:hover" section.

2. Re-download altitude pro theme, then replace style.css file via ftp.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[SimplyAA]

Thank you very much! it already had the auto width so I downloaded the theme again and went through all my changes and figured it out. I had another area set with a block setting that was messing it up.

Thank you very much. I never would have figured this out without the tip on going back to the original style.css.

---

Angela

[Davinder Singh Kainth]

Welcome Angela.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Author]

Posts