?
Solved

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

Posted on 2013-12-06
4
Medium Priority
?
220 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

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…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month13 days, 7 hours left to enroll

800 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