Custom buttons and bootstrap

[unconformed]

Hi everyone

For those of you who have helped me over the years, thank you things are starting to come together. I am doing codeacdemy tutorials almost daily and I am really gaining a solid understanding of css and even programming.

My current problem is probably not that hard to fix, but I do need some guidance.
I am working a project with twitter bootstrap to build a web app. I have used the class .btn along with the class .up in my html. This styles a little button with a lot of css3 properties attached to it and is great, but is not for me.
I have created a little gif of a tick and a cross, kind of like for yes or no. I added another class to my html called voteyes, and the string everything together in my stylesheet, something lie this

.btn, .up, .voteyes {
Background-image: ......
}
I got my background image but ofcourse all of the other style was there. I could have gone in and set the display to none on each property, however I knew there was a better way. Just trying to go through this in my head here, but I have not done a lot of pseudo selector stuff previously.
I think I need to set an active, hover and clicked state for cool custom button. I also need to position it within it’s containing element, which I think I will do with margin alone. Not sure if I should do this as a % (i avoid %) as I am using bootstrap responsive. I’ll prob just use media queries to collapse but it’s so small I think it will still function in it’s form.
So I am looking for a good resource to creating making custom buttons. Here is my go at it. (off top of head not tested so excuse poor syntax).

There are three states. Unselected, hover, and selected.
I’m not sure on the size of the container, or if I need set a height or width. The image is very small
.voteyes a:link {
Background-image: url (‘../images/tick.gif’);
Margin: auto 0; /* I can figure it out later in terms of position*/
Display: inline;
Text-align: -999px; /* accessibility */
Height: 10px;
Width: 10px;
}
.voteyes a:hover {
Background-image: url (‘../images/tickhover.gif’);
Margin: auto 0; /* I can figure it out later in terms of position*/
Display: inline;
Text-align: -999px; /* accessibility */
Height: 10px;
Width: 10px;
}
.voteyes a:active {
Background-image: url (‘../images/tickhover.gif’);
Margin: auto 0; /* I can figure it out later in terms of position*/
Display: inline;
Text-align: -999px; /* accessibility */
Height: 10px;
Width: 10px;
}


Cheers

[ralph.m]

It's a little hard to follow your post. Could you link to an example, or post the full code (including HTML) so it can be tested?

[unconformed]

Sorry about that. The site I working on is on a DEV server I access at home.

I will have a go at doing this the way I think it should be done and get back to you guys. I posted this at work. Been a little quiet so I have been going through codecademy all day. man. CSS. Man. Gets really nitty gitty. those spaces, those operators. gets you.

[ralph.m]

OK, let us know when you have something. Sometimes if you take a break, it looks better the next day.

[Paul O'B]

Text-align: -999px; /* accessibility */

-999px is not a valid value for text-align I think you meant text-indent and you should use -999em as a value otherwise the item will still likely be rendered on screen.

You only need to define what changes in the different anchor states and not all the same rules again.

Look at using sprites for the rollovers and better image/text replacement techniques.

[unconformed]

Hi

I am about to read your links.

I am doing so much css study right now it is blowing my mind. Up to 4 hrs a day (things at work are not as busy). Still running into walls.

I am styling a button. It's not a link, it's a button. I have made my own classes for this button, see below. Really it is very simple, in a link state, it looks like a. In a hover state it looks like b. I suspect, that in html when you use a label like 'button' a default style is generated. This is what I don't get yet / have not learnt about. I have seen labels, input fields etc. Just don't get it yet.

This is what I have

.support .vote-yes:hover {
background-image: url('../img/tick.gif');
Margin: auto 0;
Display: inline;
text-indent: -99em;
Height: 30px;
Width: 30px;
}

When I hover over this, I get the image swap, but it is repeated, even with short code of no repeat.

I have found some cool tutes on styling buttons I will be back soon.

the above code is off top of my head to try get this working, oh html:

<button id="vote-up-{{ challenge.id }}" class="vote-yes" .....(some danjo code you don;t need to worry about)

The id vote-up has something to do with jango. I am sure it does not matter, or it may. I don;t know.

[ralph.m]

I suspect, that in html when you use a label like 'button' a default style is generated.

Yes, but if you style it yourself those defaults get overridden.

I get the image swap, but it is repeated, even with short code of no repeat.

Make sure to give us your full CSS for the button and the full HTML button code. You don't mention no-repeat in the code above.

[markbrown4]

If you're working with any framework or base stylesheet you'll want to work to their conventions.
Take a look at how icons are included in the buttons.
http://twitter.github.com/bootstrap/base-css.html#icons

You may just want to follow that convention and add your styles to another icon element in the button

<a href="#" class="btn"><i class="icon-refresh"></i> Refresh</a>

I have never needed to use a <button> tag personally. <input type="submit"> for form submissions. <a> for everything else.

[ralph.m]

I have never needed to use a <button> tag personally. <input type="submit"> for form submissions. <a> for everything else.

Yes, that's my preference, too.

@unconformed - If this isn't part of a form, you should just be styling an <a> element to look like a button.

[mnicki_mouse]

I'm using Bootstrap in a project right now, too, and have been a little frustrated with it. If you're using any of the Bootstrap button classes, those styles will be applied and you will have to overwrite what you want to change. That said, it is still a good idea to keep things consistent by using similar styles for all of your buttons, even if that means applying Bootstrap classes and overwriting things. It's extra work, but that's the downside of relying on a framework.

So it sounds like the problem you're having above is that the image repeats in the button? Is it meant to be a background image or an icon next to the text in the button?

If it's an icon, I would put it in the HTML next to the button text instead of as a background image in CSS. I guess it depends on how much control you want to have with placement of the image and whether or not you want it only to show when it is hovered. If you're wanting the image only to display upon hover, put it as a background image, but specify that the image not be repeated by doing this:

.voteyes a:hover {
    background-image: url(‘../images/tickhover.gif’) no-repeat;
}

If you're having trouble positioning the background image, you can either add extra space in the image itself or maybe try something like this to have more control of positioning it:

.voteyes a:after:hover { /* Not sure if :after and :hover will work together, but you can try it. Could also use :before. */
    content: "url('../images/tickhover.gif')"; /* not sure if it needs "" or not */
    position: absolute;
    top: 0;
    left: 5px;
}

Just presenting ideas here. Not sure if they'll work for your specific task, but hope I helped.

[Paul O'B]

.voteyes a:hover {
    background-image: url(‘../images/tickhover.gif’) no-repeat;
}

That's invalid. I think you meant this

.voteyes a:hover {
    background: url(../images/tickhover.gif) no-repeat;
}

"background-image" is not a shorthand property and only applies to the image. The "background" property is the shorthand and refers to all the background properties as required.

[mnicki_mouse]

Oops! My mistake. You're right - background, not background-image.

[unconformed]

Thanks guys

It is not a form that I am using. I want this button to be diffrent to other buttons on the site, happy to use bootstraps work for these.

Basiclly I have an image displayed as a button ( a tick) on hover it changes color, and once selected it changes color again.

I am taking a look at this right now

http://coding.smashingmagazine.com/2...and-resources/

Prob place my code in the custom stylesheet I have as I want so pretty tigh control on how it displays.

Thsi is very useful:

.voteyes a:hover {
background: url(../images/tickhover.gif) no-repeat;
}But I don't think I have this set up as an a tag. I'll have to have a look when I get home. Spent a whole longweekend away from the computer (cept friday night

[ralph.m]

Could you post the full code you are using or a link? It's hard to know where this is up to without seeing wat you are doing.

[unconformed]

I am sorry. I have been at work today. Lots of research in downtime.

the code posted above is what I currently have but I now know it is wrong.

the core of what I am aiming to do, is make my own graphic a button. Thinking about doing it this way:

http://line25.com/tutorials/how-to-b...-image-sprites

the html is on a dev server so I don't have it here. thanks for you interest in helping me.

[ralph.m]

OK, cool. That tutorial shows what code to use, so give that a try and let us know if you have any problems.

[unconformed]

I got this sorted, thanks. I used a plugin (bootstrap button creator) to help me so I need to do more reading on this. Managed to figure some things out.