• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

How do I change these graphical buttons so they show all the button?

I have a site here:


At the top there are three boxes with buttons that say READ MORE, GET QUOTE and SUBMIT.

The graphic that the buttons use should be wider so that an arrow is show on the left side of the button.

I cannot figure out in the css where to adjust this width.

Any help is appreciated.
Donnie Walker
Donnie Walker
  • 2
1 Solution
The relevant part of the CSS is in /templates/rt_panacea/css/overlays.css, line 80 on the .readonstyle-button .readon class

Your <a> tag has been assigned this CSS class, and gets it's background-image attribute set to be the "button" graphic with the arrow on the right side.

Your button graphic is here:  http://www.particletechlabs.com/templates/rt_panacea/images/body/light/readon-r.png  and it does not have an arrow on the left side.

This was probably done intentionally to make it more convenient to create a variable-sized button. The  graphic is designed to be cut off on the left hand side at whatever width the <a> tag happens to work out to be.

The width of the button is determined by the width of the <a> tag, which is determined by the amount of text in the link text. The wider it goes, the wider the button will be, but you'll never have an arrow on the left side. It's not really a button, it's just a background graphic.
If you need an easy way to re-work this into a symmetrical button, try ditching the arrow entirely and using a div tag with rounded corners. This can be done entirely in CSS and doesn't require you to fuss around with background graphics.



You can just put those "read more", "get quote", "submit" links inside of div tags, assign them to a CSS class and set the class to have rounded borders and a background color.

You could even throw in a background shadow or inner shadow using CSS only, which gives it a nice look without having to mess around with background images:

Chris StanyonCommented:
There is a left-hand arrow available to you, and to use it you'll need to add a <span> into your HTML, and slightly adjust the padding in your CSS. Your HTML will need to look like this:

<a class="readon" href="/news-and-events" title="News and Events"><span>READ MORE</span></a>

And in your overlays.css file - about line 80, you'll need to move the 8px top padding to the bottom:

.readonstyle-button .readon {
   padding: 0 0 8px 8px;

Button styling...
Donnie WalkerAuthor Commented:
Perfect! Exactly what I needed! Thank You!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now