I'm trying to elegantly solve a styling issue with some buttons and images. My goal is to have buttons that look like the following:
(Hacky mspaint mockup)
(source: robhruska.com)
However, I have a set of criteria I'd like to meet:
I also need to be able to have the icon image exist as a button alone, with no text (i.e. the button background is the icon image and the button width/height = icon image width/height).
The icon-only button needs to support :hover states that change the background icon.
The text buttons need to support the gradient background changing on :hover, but the icon itself does not have to change.
I have both the icon image and gradient image available to me in a vertical CSS sprite image.
Currently, I can only think to do this with separate sets of styles for the text buttons and icon-only buttons, along the lines of:
<!-- text-button -->
<!-- button.text-button would have gradient background and border -->
<!-- button.text-button:hover would change to the hover gradient -->
<!-- .icon would have the icon background (icon border is included in image) -->
<button class="text-button">
<div class="icon-delete">Button Text</div>
</button>
<!-- icon-only button -->
<!-- button.icon-button would have the specific icon image background -->
<!-- button.icon-button:hover would change to the hover state background -->
<!-- button styling is different than .text-button, since icon border is included in image -->
<button class="icon-button-delete"></button>
I don't particularly like using the inner <div> for the text button, since it seems to add more markup that might be unnecessary. It also makes it so that if I wanted to go back later and add text to a button, I'd have to change several components instead of just changing the button class. It also means that I probably have to define the image positions for my icon sprites for several different combinations of button/div styles, which isn't DRY.
To summarize my question: How can I do this with a single top-level style on the <button>, rather than using nested elements or separate styles for the icon- vs text- buttons? It doesn't necessarily have to be a <button> either, it could be any element if it accomplishes this elegantly.
I don't really need a full code sample, just a suggestion for how it might be accomplished best.
You can reduce the markup a bit:
<div class="button">
<a class="yourIcon">Button Text</a>
</div>
.button gets the gradient image.
.yourIcon can then get an icon for a background if desired.
Personally, I'd just use an <img> with a transparent gif and a CSS background-image instead of your icon div. And a span for the text. For the text-free version of the button, just leave out the span and adjust the button class.
I've built a crude demonstration here: http://jsfiddle.net/TTyPZ/3/
Version 2: http://jsfiddle.net/z9pD9/1/
You could use simplify it at max: just use gradient as background and insert insert another tag with icon as background inside, use css vertical-align property (it accepts % values) to place the icon properly aligned to text.
instead of using div tags consider using <b> tag, ir saves ytou some bytes and it is s google technique by the way.
hope this helps
Can you just create 2 separate button elements and use absolute positioning to get the icon button on top of the big button?
Related
<img class="icon-document" src="/images/icon-document.svg" alt="icon-document">
<img class="icon-folder" src="/images/icon-folder.svg" alt="icon-folder">
<img class="icon-upload" src="/images/icon-upload.svg" alt="icon-upload">
</div>
this is the image of what I want to achievestrong text
Raphael, it is either the icon image is already carrying the background-color, but if not then the icon would have to be png image with no background.
It is only when the image itself has no background that you can add background with CSS
try to use font awesome icon. then you can easily set a background color.
You cannot apply background color on that way. I would suggest three options:
Give a border radius to the image like this: <img src="/images/icon-document.svg" alt="icon-document" style="border-radius: 50%;">
You can crop the image with any editor or online circle_crop_image . Do the same with an image which contains only the color you want and add your image on top of that)
Find a similar icon on bootstrap
If I have a navigation menu using css image sprite, is it possible to change the z-index when the link is clicked on/selected?
You can't really use CSS to change on click (unless you use :active, but that only lasts for a moment, while clicking). Use JavaScript instead.
Let's say your CSS looks like this:
#change_me {
z-index: 1;
}
Then you can have HTML with some inline JavaScript:
<div id="change_me">My z-index will change</div>
<div onclick="document.getElementById('change_me').style.zIndex='2'">
Click Me!
</div>
Clicking the second div will change the z-index of the first (i.e. #change_me).
It doesn't matter what the elements are (they can be div's, span's, p's, etc.)
I know how to display an icon as such:
<span class='icon-remove'></span>
But If I add padding to the span, extra icon shows up. How to fix it?
span {
padding-right:60px;
}
fiddle
The glyphs are presented using one large image map (or so called CSS sprites), so if you leave enough space on in either side of the element it will show other glyphs as well. Two solutions comes to mind:
1) Put the icon in a containing element:
<span><i class='icon-remove'></i></span>
2) Or use margin:
span { margin-right: 60px }
I figure you just want to have some whitespace to the right of the icon? Have you tried margin:
<span class='icon-remove' style='margin-right:60px'></span>
The reason extra padding displays more icons is that Bootstrap uses CSS sprites to display icons. What you're actually seeing is a background image, more specifically a section of a large background image that includes many available icons. The definition of the class "icon-remove" specifies the background-position property to select the particular icon. If you add padding, you will reveal more of the background image, which will show additional icons.
The solution, then, is to either add margin, as Rid Iculous suggested, or couch your within another element and add padding to that. I'd go with the margin.
I'm currently using this current HTML markup with Javascript to create text links with a inline image that "rolls over" on the text hover.
<div><a id="link" href="page.html"
onmouseover="rollover(this.id,'over');"
onmouseout="rollover(this.id,'out')"
>Link</a><img id="linkButton" src="image.gif" /></div>
It's important that the image is inline so I can easily create new text links with varying lengths of text.
I want to try and get this done without Javascript, and using a single image containing the over and out states of the rollover, so probably using the background position trick.
You need to use background-image (or just background) in CSS. Here is an example http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
The key is using pseudo classes on the link element. Eg:
a:hover
a:active
a:visited
You can also use inline-block so that the a isn't completely a block element. You may want to set a width and a height to it. Keep in mind display:inline-block doesn't work that great in IE7, if you still need to support that.
Here's some additional tips on using CSS Sprites
I listed categories in my website on my home page. I want the image to change to the blue version of it onhover position. I also want that picture to change to the blue version when Computer Services heading is onhover in onhover position. I coded one way but it looks like is not working properly because I went inside of the image it changed then it went back several times. Is there anybody can help me with this ?
Here is the coding I made for this;
http://jsfiddle.net/4M2sr/
Note: I don`t want that black text to change the color of heading or picture.
What's happening is that your <p> tag is sitting on top of the other elements, blocking the on-hover effect when you mouse over the middle of the image. There are a couple of ways you can fix this:
Use z-index to fix this problem by forcing the <p> tag behind the other elements.
Change the <p> tag to an inline tag, like <span>.
Apply display: inline to the <p> tag's style.
Note: if you use the second or third, you may need to adjust the positioning styles of the <p> tag.