bootstrap buttons getting smaller when active - css

Hey guys I have problem And I'm sitting all day trying to figure it out...
Problem is that if I click on button (succes, danger, custom) it gets a bit smaller:
When button becomes :active it will do this... and this applies only to btn class...
What could be the problem?
I tried setting active link font-size, but it's just make everything worse...

Just writing my own comments as an answer as this help him to figured out the solution
your css might be messing around with button, on button plz do inspect element and check on active state this way you'll figured it out on your own

Related

CSS fixed background issue when scrolling

So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily

Bootstrap Button Pressed State

I've got an issue with my buttons and I don't know where the CSS is. If you look on my site, http://www.gnarlydigital.com/services, you'll see a button with 'Start your project>>'. When you hover over the button, the button looks like it's been pressed. If you click and hold then the button gains an inner shaddow and the border at the bottom appears again.
How can I fix it so that the hover and the press and hold states are the same?
Thank you.
Thanks Richlewis, I've spotted it. One of the problems was seeing the active state, but this post answers it perfectly.
See :hover state in Chrome Developer Tools

How to achieve hover state in iPad / iPhone links?

I've noticed on a lot of sites recently that the hover state is being achieved on links.
For example there is a bunch of links, you touch one, it turns red, you touch it again and the link works.
I have tried various CSS methods to achieve this but so far no luck.
Can anyone shed any light?
Cheers
Here is an article that talks about the iOS :hover/double tap issue .
That's not a hover event, to me it seems more like a click event. You click, the color changes (or better still, it toggles)
Well, you can try these toggle/switch examples: css toggle

Button Text dissapears using overflow:visible within IE7

In Internet Explorer, there is unnecessary padding that occurs to the left and right within the button when the button name is large. As a result of this, the known solution is to add "width: auto" and "overflow:visible" to the button style, but doing so will inadvertently make the text in the button disappear when the user scrolls the page down and then back up.
I would very much like to use the style I've included so the padding stays removed, but more importantly resolve the issue with the button text disappearing. It's really an odd one!
I've created this DEMO page for you to test the code where it's happening: http://jsbin.com/uhuze3
Note: You'll need IE7 to see the issue, so for those who don't have it, I create this video for you to see the issue. http://screencast.com/t/MTg0NzY2Zj
I was able to resolve this and improve the code a bit.
You can see the code here:
http://jsbin.com/uhuze3/4
This was the old code:
http://jsbin.com/uhuze3
Edit by Johnny5 :
It seem to be the combinaison of "height" and "line-height" that correct the bug.

css sprite button is jumping around

Does anyone know what is causing the sprite rollover to jump around
It is I think more likely a photoshop question, but I am not completely sure.
I hope to get an answer here anyway, since I think most webdesigners/programmers problably worked with photoshop also.
This is what I want the rollover to do example 1
and this is my testpage (see the play button)
I made the sprite with spriteme.com
thanks, Richard
I do not see anything jumping around. However, when I first open the page the Play button is missing (its style is set to display: none;). When I click stop it appears, and then disappears when I click play. This is due to it's inline "display" style being set to block and none.
Is this your problem?
Note: I tested in Chrome and FF. I debugged the CSS states using Firebug.

Resources