Html ve Css ile 3d Button Tasarımı

Html ve Css ile 3d Button Tasarımı

Html ve Css kodları kullanarak üzerine gelince renk değiştiren ve tıklanınca hareketlenen 3d buton tasarımı anlatacağız. Bu tasarım da her hangi bir java script kodu bulunmuyor. Kodlar Canlı örneğin  altında olacak.

Uygulama Canlı Örneği

3D   B u t o n

Css Uygulama Kodu

.bas{
	background-color: #0068FF;
	width:370px;
	height:35px;
	text-align:center;
	color:white;
	font-size:30px;
	font-weight:bold;
	padding-top:5px;
	}
.D {
	width:330px;
	height:320px;
	padding:15px;
	float:left;
	border:solid 5px;
	border-color:#0068FF;
	}	
.D1 {
	height: 80px;
	float:left;
	}
.D2 {
	height: 80px;
	float:left;
	}	
.D3 {
	height: 80px;
	float:left;
	}
.D4 {
	height: 80px;
	float:left;
	}	
	
.button {
	display: inline-block;
	width: 80px;
	height: 40px;
	float:left;
	margin:15px;
	font-size: 25px;
	cursor: pointer;
	text-align:center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #0068FF;
	border: none;
	border-radius: 100px;
	box-shadow: 0 7px #fff;
	}	
.button:hover {
	background-color: #fff; 
	color:#0068FF; 
	height: 50px;
	box-shadow: 0 13px 5px #0068FF;
	}
.button:active {
	background-color: #fff;
	box-shadow: 0 5px 5px #0068FF;
	color: #0068FF;
	transform: translateY(15px);
	}
	

Html Uygulama Kodu

<div class="bas"> 3D&nbsp;&nbsp;&nbsp;B u t o n </div>
<div class="D">
	<div class="D1">
		<input class="button" type="button" value="1"></input>
		<input class="button" type="button" value="2"></input>
		<input class="button" type="button" value="3"></input>
	</div>
	<div class="D2">
		<input class="button" type="button" value="4"></input>
		<input class="button" type="button" value="5"></input>
		<input class="button" type="button" value="6"></input>
	</div>
	<div class="D3">
		<input class="button" type="button" value="7"></input>
		<input class="button" type="button" value="8"></input>
		<input class="button" type="button" value="9"></input>
	</div>
	<div class="D4">
		<input class="button" style="width:300px" type="button" value="0"></input>
	</div>
</div>