0

CSS ドロップ シャドウと CSS トランジションを使用して、一連の 3D ボタン効果を作成しようとしています。私はすべてがうまくいきましたが、見た目は良いですが、ボタンをクリックすると影がボタンに向かって移動し、ボタンが動くだけで一箇所にとどまるようにします。

これが現在のコードペンのデモです。

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

トランジションのタイミングを変えてみましたが、うまく動きませんでした。

4

2 に答える 2

4

ここに問題があります

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>

于 2015-02-28T14:07:39.443 に答える