CODEWITHSUNDEEP
htmlcss
RATIU5
RATIU5

Reputation: 378

How to slow hover buttons and align them in specific location

EDIT: I need when you hover , it slowly appears blue, not instantly. Here is the css:

.button {
    text-decoration:none;
    text-align:center;
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#392a23;
    background-color:#a2a2a2;
    background-image: -moz-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -webkit-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -o-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -ms-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#464646', GradientType=0);
    background-image: linear-gradient(top, #a2a2a2 0%, #464646 100%);
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    text-shadow: 0px 2px 2px #909090;
    filter: dropshadow(color=#909090, offx=0, offy=2);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.button {
    text-decoration:none;
    text-align:center;
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#392a23;
    background-color:#a2a2a2;
    background-image: -moz-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -webkit-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -o-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -ms-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#464646', GradientType=0);
    background-image: linear-gradient(top, #a2a2a2 0%, #464646 100%);
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    text-shadow: 0px 2px 2px #909090;
    filter: dropshadow(color=#909090, offx=0, offy=2);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.button:hover {
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#372d2f;
    background-color:#00aeff;
    background-image: -moz-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    background-image: -webkit-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    background-image: -o-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    background-image: -ms-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e4a', endColorstr='#000e4a', GradientType=0);
    background-image: radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    text-shadow: 0px 2px 2px #3098d9;
    filter: dropshadow(color=#3098d9, offx=0, offy=2);
}
.button:active {
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#313131;
    background:#606060;
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -webkit-transition: all 0.5s ease-in-out;
    text-shadow: 0px 2px 2px #777777;
    filter: dropshadow(color=#777777, offx=0, offy=2);
}

Here is the html:

<a href="#" class="button">Home</a> 
<a href="#" class="button">Games</a>

I tried transition: all 500ms linear; transition-delay: 1ms; and -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out

but none make a delay or a slow hover. It is not working! The slow hover is the only problem now.

Upvotes: 0

Views: 81

Answers (3)

loli
loli

Reputation: 1068

Remove the gap between the buttons and wrap them inside a DIV with the following CSS

<div id="posbuttons">
   <a href="#" class="button">Home</a><a href="#" class="button">Games</a>
</div>

#posbuttons{
    position:relative;
    text-align:center;
    top:40px;
    margin:auto;
}

jsfiddle for demo : http://jsfiddle.net/0krfzfbr/1/

Upvotes: 0

connexo
connexo

Reputation: 56773

To remove the white-space issue when lining up inline-blocks, a common fix is to give the parent element font-size: 0; and reset the font-size to whatever you need for your lined-up inline-blocks.

http://jsfiddle.net/a6j3ezt3/4/

Upvotes: 0

Luca Reghellin
Luca Reghellin

Reputation: 8113

It depends on what you're searching for, and also on your markup. Anyway, the 2 main alternatives I would use are:

a. make them inline-block (if they're block or inline elements) and then eventually apply vertical-align:middle, if you need to.

.button{
   display:inline-block;
   vertical-align:middle;
}

b. make them block or inline-block elements and float all left. In this case you could need to also add some clearfix styles on the contaner, ora add a clearfix div before/after the buttons. Again, if you'll even provide your markup and a more detaild description of what you need, we can help more and be more specific.

.button{
   display:inline-block;
   float:left;
}

Upvotes: 1

Related Questions