css - 带有 CSS 阴影和过渡的 3D 按钮效果

Question

我正在尝试使用 css-drop 阴影和 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;
}