Make Theme Default Buttons Larger

[Kent]

Hi,

My site is here: http://kiersdev.com/hatheway1/

Built on the Modern Portfolio Pro Theme. I'm trying to make the buttons that are setup with the site (Book an Appointment) larger, but I'm not having any luck. I've tried adjusting the padding here:

.button,
.widget .button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #27b4b2;
	border: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 16px;
	font-size: 1.6rem;
	padding: 16px 24px;
	padding: 1.6rem 2.4rem;
	width: auto;
	text-align: center;
	text-decoration: none;
}

but it doesn't seem to have an effect. I think I must be looking in the wrong spot. I don't really understand how these buttons work - what to call them when I search - so that doesn't help much either.

---

Dad. Biker. Designer. | kentfackenthall.com

http://www.kiersdev.com/hatheway

[Marcy]

It looks like you made that particular button larger with:

#services a.button {
float: right;
line-height: 1;
margin-top: -40px;
margin-top: -4rem;
padding: 20px 24px;
padding: 2rem 2.4rem;
}

That's a good way of doing it, if you just want to change the size of that one button.

I can't see anywhere right off that would keep the default code you have above from making the default size larger (in the code you posted), if you make the padding sizes to be the same as you have for the #services a.button that I posted.

Sometimes a particular plugin will style the buttons too much and then you will need to find the particular plugin code and override it in your style.css.

Do you have some other buttons that you need help with on that site?

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts