Solved

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

Posted on 2013-12-06
4
214 Views
Last Modified: 2013-12-07
I have a site here:

www.particletechlabs.com

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.
0
Comment
Question by:Donnie Walker
  • 2
4 Comments
 
LVL 31

Expert Comment

by:Frosty555
ID: 39702726
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.
0
 
LVL 31

Expert Comment

by:Frosty555
ID: 39702729
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.

http://www.w3schools.com/css/css3_borders.asp

http://viralpatel.net/blogs/rounded-corner-css-without-images/

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:

http://css-tricks.com/snippets/css/css-box-shadow/
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39702964
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...
0
 

Author Closing Comment

by:Donnie Walker
ID: 39703042
Perfect! Exactly what I needed! Thank You!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
manage footer size 4 73
div to fit another div 8 28
html / css issue / div issue. stuck, help needed 2 16
CSS DIV Height in Percent 1 9
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question