glow effect on all buttons, but only want it on 4

Question

I'm making a web page (lots of them that are connected)

I have added the glow function/attribute to my buttons in CSS. The thing is I've used this;

button:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

The thing is, my CSS file is linked and being used by 5 different HTML files and more are coming. So instead of just getting the glow effect on just 4-5 buttons that I have on one HTML page, the glow function now is on all buttons on all other HTML pages.

How do I avoid this, I cant add the glow function inside the #id's can I?

My buttons like like this in css

#TrafficJam1 {
    position: absolute;
    top: 1120px;
    left: 20px; 
    height:107px;
    width: 278px;
}

That's just one of them

Here's the HTML part of that particular one,

<input type="image" src="TrafficJam.jpg" id="TrafficJam1">

I have to use this code because my buttons are images.

Add a class to the buttons you want to glow, e.g. `glowbutton` and replace `button:hover` with `.glowbutton:hover`. — RevanProdigalKnight, Oct 16 '14 at 13:21
You'd want to add a class to the buttons that need to glow, and style *that* in CSS (e.g. `.glowbutton:hover { ... }`). The CSS as shown wouldn't apply to an `input` element, so I'm a bit confused by your example HTML. — Paul Roub, Oct 16 '14 at 13:22
here is an example: [jsfiddle](http://jsfiddle.net/s1g21m36/) — , Oct 16 '14 at 13:45

score 0 · Answer 1 · answered Oct 16 '14 at 13:23

0

Give the buttons you want to apply this CSS to a class like this:

<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">

A class is another identifier for html elements. But it's different from id in the sense that you may use them to target multiple elements at a time. So you can just give the buttons you want this effect on the same class and target that class in your CSS like this:

.glow:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

Then a little bit off topic. The thing you're asking is pretty basic stuff. So I get it that you're beginner at HTML and CSS, right? In case you are it would be wise to learn some more HTML and CSS with an online learning tool like codecademy.com.

answered Oct 16 '14 at 13:23

Frank Kluytmans

533
2
10
25

Please consider using the actual class (`.glow`) in place of `.classname`, so the answer is more comprehensible to CSS novices. – Paul Roub Oct 16 '14 at 13:26
Hey, thanks for the answer. I've solved my problem. And yes I am a beginner. I've finished the html and css course at codeacademy. The truth is, Im studying IT & and software development, and our professor is crazy and is giving us too hard projects etc compared to our skills. He's giving us insane hard tasks to solve with using html, css, jquery and javascript, even of none of us (80 students) cant code much. He's been doing this the whole semester, so nobody has learned anything. He cant expect us to solve crazy stuff when we cant even make a normal webpage lol. But thanks for help – Rambo Oct 16 '14 at 13:33
@Rambo, if you're stuck, dw about coming here and asking (as you have just done) to get some guidence after running into some trouble - as long as you've made a stab at it. But why can't you ask him for a little more guidence (as a group)? – Oct 16 '14 at 13:40
you cant communicate with this professor. If you ask him about something, anything, he just gets angry and replies with "why aren't you understanding it? Arent you doing your homework? Arent you using the console for troubleshooting? etc. Its pointless, so the whole class is going to have a meeting with him next week and we hope it gets better and that he finally gets the hint. If not, we have to go to the dean at our university. But thanks, I'll ask here whenever I need help – Rambo Oct 16 '14 at 14:03

score 0 · Answer 2 · answered Oct 16 '14 at 13:27

Create a new stylesheet and link this in the page where you want the buttons to glow. This is easily done by using the <link> tag, but I guess you are familiar with that. In that file you could just add the code you were using:

.classname:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

glow effect on all buttons, but only want it on 4

2 Answers2