This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Reply To: Css code for buttons

#1211
Jason Bobich
Keymaster

Wow, quite the attitude there, Ms. Naughty. I apologize. I edited by response after looking more closely at what you’re trying to do. I just misunderstood your original question and so things got a little confusing. I answer a lot of questions.

Yes, you’re right. After styling is placed on inputs in general, it is difficult to “override” them because every web browser has different default stylings for form elements. But you can style your “button” inputs in the same way the theme styles “submit” inputs. This will allow for consistency across all browser and other form elements in the theme.

input[type=button] {
	background-color: #f4f4f4;
	border: 1px solid #d1d1d1;
	color: #666666;
	cursor: pointer;
	font-weight: bold;
	margin: 0;
	padding: 8px 15px;
}
input[type=button]:hover {
	color: #666666;
}

If you were to remove the styling on these elements all together, you’ll notice that every browser will display them differently in whatever default way they’re setup to. Keep in mind that these default stylings also do not include the pointer cursor. And so these are reasons why people generally like to style these elements manually instead of how they’re “supposed to look” as you put it — in order for consistency and something other than the same “default” look that every site has. All personal preference though.