You are declaring your class
names in href
attribute. Your markup should be
<div class="map_view_buttons">
<a href="#" class="draw"><span></span>Draw From Scratch</a>
<a href="#" class="add"><span></span>Add Area</a>
<a href="#" class="edit"><span></span>Edit Area</a>
</div>
Not only that, you are having the same selectors with different colors, so the last one will override the two previous ones.
So that should be
.map_view_buttons a.draw span {
background:red;
}
.map_view_buttons a.add span {
background:orange;
}
.map_view_buttons a.edit span {
background:green;
}
Am not sure if you really want the selectors to be that specific, and if you don't want to add the classes to each of the anchor tags, you can use :nth-of-type()
pseudo...
So the above thing can be written as
.map_view_buttons a:nth-of-type(1) span {
background: red;
}
.map_view_buttons a:nth-of-type(2) span {
background: red;
}
.map_view_buttons a:nth-of-type(3) span {
background: red;
}
Demo 2 (No need to declare classes)
You can also get rid of the span
tags if you want to, by using :before
pseudo element with pointer-events: none;
.
.map_view_buttons {
float:left;
}
.map_view_buttons a {
display:inline-block;
padding:3px 10px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #a8a8a8;
font-weight:bold;
color:#000;
font-size:12px;
}
.map_view_buttons a:before {
content: "";
display:inline-block;
width:18px;
height:18px;
vertical-align:middle;
margin-right:5px;
border:1px solid #ccc;
}
.map_view_buttons a:nth-of-type(1):before {
background: red;
}
.map_view_buttons a:nth-of-type(2):before {
background: orange;
}
.map_view_buttons a:nth-of-type(3):before {
background: green;
}
Demo 3 (No span
tags, no class
defined)
I am just saying that you can use it but doesn't mean you should use it, just go with what suits your requirements the best.
Note:
:nth-of-type()
pseudo is not supported < IE9 so if you are looking to support vintage versions, than declaring classes for each is a better option.