How to change the size of a button | WordPress.org

Resolved FamiliesFirst
(@familiesfirst)

9 years, 9 months ago

There is a blue button on the homepage for our website which says ‘browse articles’: http://www.familiesfirstmagazine.com/

The button is now covered by our sidebar which features social media widgets and it doesn’t look very good. I want it to be smaller so that it’s in full view.

The code we have for it is this: <a class="largebutt centre" href="http://muenterprises.org/familiesfirst/articles/">BROWSE ARTICLES</a>. I have tried so many alternatives to try and change the size; ‘mediumbutt’, ‘smallbutt’, adding in dimensions – but they either take the button away completely or just show a portion of the button rather than making the whole thing smaller.

The button was put on the website before my time and I think the button is actually an image rather than something that WordPress offers as a plugin but I am not sure.

An alternative would be to change the width of the sidebar on the homepage but I don’t know how to do that either.

I am very new to web design so would really appreciate simple instructions!

Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

Flash Buddy
(@flashbuddy)

9 years, 9 months ago
http://muenterprises.org/familiesfirst/files/2013/11/lg_button_blue.jpg

Yup, the button is an image, hard coded in the css. You will have to resize the image and update the css to reference your smaller image

OR

Edit the css to not use the image. Something like:
```
.largebutt {
display: block;
width: 140px;
height: 40px;
background: #006FB7;
line-height: 40px;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 15px;
}
.largebutt:hover {background:#DAE15F;}
.largebutt:active {background:#DAE15F;}
```
bretwp
(@bretwp)

9 years, 9 months ago

You are correct that the button is an image. The background of largebutt is that image.

My recommendation would be to remove the code for this button completely and add a new image, or css button in it’s place.

Thread Starter FamiliesFirst
(@familiesfirst)

9 years, 9 months ago

Thanks flashbuddy and bretwp. How do I add a css button in it’s place?

bretwp
(@bretwp)

9 years, 9 months ago

Here is an extensive look at creating CSS buttons, there are also ‘CSS button generators’ available online.

http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/

I think it would be easiest to just use an image and link it.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to change the size of a button’ is closed to new replies.

Tags

In: Fixing WordPress
4 replies
3 participants
Last reply from: bretwp
Last activity: 9 years, 9 months ago
Status: resolved

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics