具有 CSS 阴影和过渡的 3D 按钮效果

Question

我正在尝试创建一组带有 css 投影和 css 过渡的 3d 按钮效果。我让一切正常，看起来不错，但是当点击按钮时，阴影移向按钮，我希望它留在一个地方，只为按钮移动。

这是一个 codepen 演示，现在看起来如何。

`http://codepen.io/andornagy/pen/ZYRRar`

我尝试更改转换时间，但无法正常工作。

Answer 1

你这里有问题

box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
                2px 1px 0px #1976D2,1px 2px 0px #1976D2;

改为：

box-shadow: 0px 0px 0px #1976D2,0px 0px 0px #1976D2,
                0px 0px 0px #1976D2,0px 0px 0px #1976D2;

button {
 /*  */
 padding:35px;
 margin: 0;
 width:350px;
 
 /* Font Styling */
 font-size:30px;
 font-weight:bold;
 color:#FFF;
 }
 
button:active {
 outline:none;
 }

.rightBottom {

 transition: margin-top 0.3s ease, 
    margin-left 0.3s ease, 
    box-shadow 0.3s ease;
 
 background:#03A9F4;
 border: solid 1px #1976D2;

   box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
      2px 1px 0px #1976D2,1px 2px 0px #1976D2,
      3px 2px 0px #1976D2,2px 3px 0px #1976D2,
      4px 3px 0px #1976D2,3px 4px 0px #1976D2,
      5px 4px 0px #1976D2,4px 5px 0px #1976D2,
      6px 5px 0px #1976D2,5px 6px 0px #1976D2,
      7px 6px 0px #1976D2,6px 7px 0px #1976D2,
      8px 7px 0px #1976D2,7px 8px 0px #1976D2,
      9px 8px 0px #1976D2,8px 9px 0px #1976D2;
 }
 
.rightBottom:active{

 transition: margin-top 0.3s ease, 
    margin-left 0.3s ease, 
    box-shadow 0.3s ease;

    margin-left:10px;
 margin-top:10px;
 
  box-shadow: 0px 0px 0px #1976D2,0px 0px 0px #1976D2,
      0px 0px 0px #1976D2,0px 0px 0px #1976D2;
   
}

<button class="rightBottom">I am a Button!</button>

Answer 2

您可以使用下面的 CSS。 CSS

.down {
    -webkit-transition: margin-top 0.3s ease, box-shadow 0.3s ease ;
    -moz-transition: margin-top 0.3s ease, box-shadow 0.3s ease;
    transition: margin-top 0.3s ease, box-shadow 0.3s ease;

    background:#1abc9c;
    border: solid 1px #16a085;

    -webkit-box-shadow: 0px 9px 0px #16a085;
    -moz-box-shadow: 0px 9px 0px #16a085;
    box-shadow: 0px 9px 0px #16a085;
}
.down:active{
    -webkit-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
    -moz-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
    transition: margin-top 0.2s ease, box-shadow 0.2s ease;

    margin-top:9px;

    -webkit-box-shadow: 0px 0px 0px #16a085;
    -moz-box-shadow: 0px 0px 0px #16a085;
    box-shadow: 0px 0px 0px #16a085;
}

具有 CSS 阴影和过渡的 3D 按钮效果

3D Button effect with CSS Drop-shadow and transition

css

css-transitions

box-shadow