CODEWITHSUNDEEP
htmlcss
jotamon
jotamon

Reputation: 1614

Button active state offset via class

I have some buttons in a container. I would like their active state to offset down by 1px or so. Rather than write css for each button, I would rather class them and have their active state relative to their original position.

The css currently looks like below. Or check out this working fiddle. The problem is that the active state offset seems to be greater than 1px for the bottom 2x buttons. Not sure what I am missing. 

#buttons {
    position: absolute;
    top: 10px;
    left: 10px;
}

.greenButtClass {
    font-family: 'avenirMedium';
    position: absolute;
    z-index: 10;
    color: #ffffff;
    font-size: 22pt;
    width: 200px;
    background-color: #7ac144;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 35px;
    padding: 8px;
    cursor: pointer;
    border: 1px solid #7ac144;
}

.greenButtClass:hover {
    background-color: #6DA840;
}

.greenButtClass:active {
    position: relative;
    top: 1px;
}

Upvotes: 1

Views: 113

Answers (1)

Alex Char
Alex Char

Reputation: 33218

Here what i suggest if i understand right your problem:

html:

<div id='buttons'>
    <br>
    <button id='places' class='greenButtClass' style="top:15px">Button 1</button><br>
    <button id='nature' class='greenButtClass' style="top:105px">Button 2</button><br>
    <button id='trails' class='greenButtClass' style="top:205px">Button 3</button>
</div>

css:

#buttons{
    position: absolute;
    top:10px;
    left:10px
}
.greenButtClass{
    font-family: 'avenirMedium';        
    z-index: 10;
    color: #ffffff;
    font-size: 22pt;
    width:200px;    
    background-color:#7ac144;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius:35px;
    padding:8px;
    cursor:pointer;
    border:1px solid #7ac144;
}
.greenButtClass:hover {
    background-color:#6DA840;
}
.greenButtClass:active {
    position:relative;  
    top:1px;
}

And a working fiddle

And another one with more spaces between button as your example:

fiddle

Upvotes: 2

Related Questions