Discussion on Elitepack Classic CSS3 Buttons

arrowthemes

arrowthemes supports this item

Supported

This author's response time can be up to 1 business day.

36 comments found.

the icon can be added whatever the size ? and it is just a <img tag before or after the text ? I would like to know what kind of syntax you are using ( background css ) ?

Hi,

The syntax is as follows:

<span class="silver icon">Select<span class="download"></span></span>

where: class=”icon” defines that the button uses an icon to define the right padding class=”download” refers to a css with background-image.

The image is added via css. The size of the image is controlled via css. By default the demo includes 16×16 images but you can have it use any image size by:

1. changing the image size width x height in the css 2. using the .large/ .x-large /.xx-large class to make a larger button that will match the size of the icon.

regards, Joel

Hi, Maybe I’m a little dumb but I have a question about using the CTA button… I edited the colours etc to get it look as I wanted, which was fine. However, now I have a little button which doesn’t actually do anything.

How do I convert it to a link? I can’t work it out. Buttons are fine, but not the cta. Also, I can see in the css that cta is shown as float left. How do I change that so I can have float left / right / centre for more than one cta on a page? I think if I change the css it changes all cta buttons, right?

Brian

Hi Brian,

I have replied to your email. For anyone else who might wonder the same, you can do so by changing the span into an a tag:

<a href="#" class="bluegrey cta"> <span class="cta-title">Call to Action</span> <span class="cta-tagline">Lorem ipsum dolor </span> </a>

Regards, Joel

I edited the colours in the bright css. I deleted all colours I didn’t need and kept only yellow and black, and then played with their colours. I deleted the hover border shadows as I don’t like them.

Now, I don’t have this online, so I’m testing on my local pc with dreamweaver CS5 .

On my page I have a cta button and a normal small button. With my edited css, when I preview in FFox all is okay, likewise IE9 , but if I change to IE7 or 8, the small button vanishes and I just get the black text from the small button.

Also I noticed that if the cta tagline os longer than x characters, any overspill vanishes – it doesn’t scroll to a second line. In a way, I don’t mind this. However….

Wondering what I’d done wrong, I renamed my edited css and ran the same page with a virgin bright.css to see what happened.

The overspill from the cta tagline appeared, but just as grey text that was below the cta button. This is worse than mine. Is it possible to size the cta so that it auto-adjusts in depth to accomodate additional text? I’m unsure though, why my colour edits (and I adjusted the tagline padding to 32px from 35 to lift it off the base of the box) should effectively hide the tagline overspill…

With the virgin css, the small button is still only grey text – no button. The css was copied directly from the unpacked zip.

I only really want the cta box for now, but I’m confused as to why the buttons don’t work with ie7 and 8.

Do I have to reference the pie file somehow?

Any guidance would be appreciated. Brian

Hi Brian,

I have replied to your email

Regards, Joel

Thanks for the email; much appreciated. Brian

You’re welcome, Brian.

minor fault in all the demos when downloaded, missing http for Google API /Jquery. I wondered why “view HTML code” buttons did nothing.

Apart from that, nice work … VERY handy, nice to see integration with PIE .htc for older browsers.

Thanks for pointing that out, exouk.

I think that happens with mac only. in windows I don’t get a problem with the missing /Jquery – I’ll make a point of updating it.

Regards, Joel

Joel, this error occurs on Vista & Win7, all browsers (IE7+, FF etc) However, I’ve noticed it works when on a web browser (local IIS etc), but fails if run locally … which many people may do when unzipping the download and simply open the HTML directly.

:| Sorry about that. I think I use localhost full time that’s why I didn’t take note of that. Thanks for the notification, I’ll upload an update to fix that. :)

regards, Joel

love these buttons. I’ve used them several times already .. its great.

one small details. I can not get the rounded corners to work in IE8 /7. not sure why, as I am using similar code, and have the pie.htc file in place, within the css folder..

any ideas on this?

Hi Floriauck,

Glad to hear that! :)

What environment are you running on? Do you have a link that I could look at?

Regards, Joel

Sure, let me email you the link

Okidoks!

This is great! How can I center the text in the CTA button?

Hi,

To center the tagline, you could add the following to the .cta-tagline class

.cta-tagline { right: 0; text-align: center; }

Regards, Joel

I have been looking for an alternate CSS button package beside the Sexy Button. I am curious if it is currently possible to create button groups with individual button effects (disable, hover effect, etc) indipendent with one another?

Hi,

Thanks for the interest.

Unfortunately it still doesn’t support button groups. I’ll consider adding this in the future.

regards, Joel

Hi Joel,

Thank you for the reply. Just curious, is it possible for me to add custom size button beside the one defined (ie. Buttons in XXL , XXXL size, etc)?

Yes. That is quite possible. The buttons expand based on the font-size you specify and the padding you set so that’s all you need to set a new size.

regards, Joel

Hi , I just notice that using IE9 if I open the demo files locally it shows the gradient background, but if I upload it to a web server it doesn’t make the gradient backgrounds. What I´m doing wrong? Thanks

Hi D-Tales,

There is nothing you are doing wrong. The reason you are seeing that variance is due to the relative path difference in both cases;

when you view on a web server it shows correctly because the pie.htc (which fixes background gradients for IE9) is correctly mapped. When viewing it on a local, you need to use a local server e.g wamp/mamp rather than running the files directly.

regards, Joel

Hi Joel , what’s happening to me is the exact opposite, if I open local it works (without any web server, just directly in the browser) if I upload to my web server it doesn’t work

Hi,

Could you provide a link to your website?

regards, Joel

Hi,

Under my demo package, I had a file named ‘PIE.htc’ in the css folder, which I don’t seem to find in your remote site: http://abfhost.info/jose_branco/demo/css/PIE.htc

Could you confirm if you uploaded this file?

UPDATE

Actually, I’ve confirmed that for IE9 I didn’t have the background gradients, it was just a solid color. If you’d want to implement background gradients in IE you can try adding the following code:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */

regards, Joel

When to PIE site and found a solution: Use PIE.php instead of PIE.htc , working fine now :) Thanks for the help

Oh! Glad you got it working. :)

All the best in your project. regards, Joel

How can I set the width of ”.darkblue.normal” ? I have tried to create a separate style and/or span style but the additional CSS does not alter it or seem to work.

I am trying to get a width of 196 px on the buttons. Thank you

Hello,

The .normal button is set to expand based on the content and padding of the content. If you’d want to set a fixed width you could add the following code:

.darkblue.normal {display: inline-block;} 

Let me know if that helps.

regards

Hello,

The .normal button is set to expand based on the content and padding of the content. If you’d want to set a fixed width you could add the following code:

.darkblue.normal {display: inline-block;} 

Let me know if that helps.

regards

Just wondering:

- Can I have the icon display on the right side of the text?
- Is there a way to define the radius of the button corners?
- Is it possible to create translucent/transparent effect buttons?
- Can I do glow effects on the buttons?
- Can I do some sort of text highlight like this:



Thanks.

1. Yes. You can place the icon before the text

2. Yes you can change that via css

3. You may have to modify the css yourself to achieve that.

4. You may have to modify the css yourself to achieve that.

5. You may have to modify the css yourself to achieve that.

regards, Joel

how to use, can i do download as an image button?

Hi,

These are css buttons so you can’t download them as an image button.

To use them, you only need to add the css stylesheet to your site then use the syntax html as provided in the documentation.

regards, Joel

by
by
by
by
by
by