طراحي دكمه سه بعدي با css

طراحي دكمه سه بعدي با css

untitled

در اين آموزش مي خواهيم يك دكمه سه بعدي با قابليت فشرده شدن طراحي كنيم

داخل تگ body يك تگ a تعريف مي كنيم و به اين تگ يك كلاس نسبت مي دهيم

<body>

<form id=”form1″ runat=”server”>

<div>

<a href=”#” class=”push_button”>OK</a>

</div>

</form>

</body>

حال براي استايل دهي راه هاي مختلفي وجود دارد، در اينجا ما از تگ style در تگ head استفاده مي كنيم

.push_button{position:relative; background:#09f; color:#000; text-decoration:non; padding:5px 10px; border-radius:3px;

box-shadow:4px 4px 4px #000;}

از اين خاصيت براي سايه دادن به چارچوب دكمه استفاده كرده ايم، اين خاصيت 4 مقدار مي گيرد كه به ترتيب عبارتنداز: افقي، عمودي، ميزان پخش شدن رنگ، رنگ.

حال يك css ديگر مي نويسيم كه موقع فشرده شدن دكمه (اكتيو شدن) قطر سايه كمتر شود كه همين باعث سه بعدي شدن دكمه مي شود.

.push_button:active{box-shadow:2px 2px 2px #000;}

حسین ضمیری

دیدگاه ها بسته شده است