按钮背景与垂直菜单中的阴影不对齐答案

【问题标题】：Background of button dont align with shadow in vertical menu按钮背景与垂直菜单中的阴影不对齐
【发布时间】：2019-03-17 17:31:49
【问题描述】：

我正在做一个项目，看看长者如何处理平面设计与拟物设计。为此，我想让菜单 3D 和逼真。我找到了一个适合我的目的的预制按钮，但是当我尝试使其垂直时，阴影会填满整个父级，但背景不会。这是我用于水平按钮的代码：http://jsfiddle.net/ahu8n91o/

HTML:

<a class="button">
    <span>TEXT FOR BUTTON</span>
</a>
<a class="button">
    <span>BUTTON 2</span>
</a>
<a class="button">
    <span>ANOTHER BUTTON</span>
</a>
<a class="button">
    <span>LAST BUTTON</span>
</a>

CSS：

.button {
    display: inline-block;
    margin: 5px;

    width: auto;

    -webkit-border-radius: 10px;

    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
    background-color: #E8E8E8;

    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),

        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),

        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0)));        

        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */

    -webkit-background-size: 100%, 100%, 100%, 4px 4px;

    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;

    display: inline-block;
    padding: 10px 20px;

    color: #3A474D;
    font-weight: 700;
    font-size: 1.2em;

    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.button span:hover {
    color: #AEBF3B;
    text-shadow: 0px -1px #97A63A;
    cursor: pointer;
}
.button:hover span{
    -webkit-transform: translate(0, 1px); /* depth of button press */
}
.button:active {
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1),
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span{
    -webkit-transform: translate(0, 5px); /* depth of button press */
}

但是当我尝试让它垂直时它会像这样搞砸：http://jsfiddle.net/ahu8n91o/1/

HTML：

<link  href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >

<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >

<div class="container">

    <a class="button">
        <span>TEXT FOR BUTTON</span>
    </a>
    <a class="button">
        <span>BUTTON 2</span>
    </a>
    <a class="button">
        <span>ANOTHER BUTTON</span>
    </a>
    <a class="button">
        <span>LAST BUTTON</span>
    </a>

</div>

CSS：

.container {
    float: left;
    height: 100%;
    margin-right: 30px;
}
.button {
    display: block;
    margin: 5px;

    width: auto;

    -webkit-border-radius: 10px;

    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
    background-color: #E8E8E8;

    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),

        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),

        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0)));        

        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */

    -webkit-background-size: 100%, 100%, 100%, 4px 4px;

    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;

    display: inline-block;
    padding: 10px 20px;

    color: #3A474D;
    font-weight: 700;
    font-size: 1.2em;

    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.button span:hover {
    color: #AEBF3B;
    text-shadow: 0px -1px #97A63A;
    cursor: pointer;
}
.button:hover span{
    -webkit-transform: translate(0, 1px); /* depth of button press */
}
.button:active {
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1),
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span{
    -webkit-transform: translate(0, 5px); /* depth of button press */
}

我看不出问题出在哪里，也不知道为什么 to 元素的行为不一样。也许我只是厌倦了看到显而易见的事情，但我真的很感激一些帮助！

【问题讨论】：

标签： css button menu

【解决方案1】：

您可以将按钮范围从 inline-block 更改为：button span {display: block}。然后它将填满表面，但所有按钮的宽度都相同。如果您想要可变宽度，请将按钮更改为 button {display: inline-block} 并在每个按钮周围添加一个 div。

您可能还希望按钮的底部边距更多。

PS：那段代码有点复杂而且没有语义。如果将样式应用于单个 <button></button>，则不会出现此问题。

【讨论】：