html - 如何减慢悬停按钮并将它们对齐到特定位置

Question

编辑:我需要当你悬停时，它会慢慢显示为蓝色，而不是立即显示。这是 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);
}

这是 html:

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

我试过 transition: all 500ms linear; transition-delay: 1ms; and -webkit-transition: all 500ms ease-in-out;
-moz-transition:全部 500 毫秒缓入缓出；
-ms-transition:所有 500ms 缓入缓出；
-o-transition: 所有 500ms 缓入缓出；
过渡:全部 500 毫秒缓入缓出

但没有一个会延迟或缓慢悬停。它不工作!缓慢的悬停是现在唯一的问题。

Answer 1

这取决于您要搜索的内容以及您的标记。无论如何，我会使用的 2 个主要替代方案是:

一个。使它们成为内联 block (如果它们是 block 或内联元素)，然后在需要时最终应用 vertical-align:middle。

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

使它们成为 block 状或内联 block 元素并全部向左浮动。在这种情况下，您可能还需要在容器上添加一些 clearfix 样式，或者在按钮之前/之后添加一个 clearfix div。同样，如果您甚至提供标记和更详细的所需说明，我们可以提供更多帮助和更具体的帮助。

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