یکی از مواردی که در طراحی سایت ها خیلی زیاد استفاده میشوند، دکمه ها هستند. ما میتواینم در هنگام کدنویسی دکمه های html، از عکس ها استفاده کنیم ولی همانطور که میدانید عکس ها حجم زیادی اشغال میکنند و باعث دیرتر لود شدن وب سایت میشوند. ما در این آموزش طراحی سایت، با استفاده از کدهای CSS3 به شما یاد خواهیم داد که چگونه بدون استفاده از عکس، دکمه html طراحی کنید. مشاهده دمو
[free_vip]
ما در این آموزش از تگ a برای طراحی دکمه استفاده کرده ایم، شما میتوانید از تگ span و … استفاده کنید :
[html]
<a class=”button green” href=”#”>Click Me</a>
<a class=”button gray”>کلیک کنید</a>
<a class=”button orange”>کلیک کنید</a>
<a class=”button black”>onliner</a>
[/html]
در این قسمت با دادن استایل های مورد نیاز مثل font, border,… فونت و ظاهر دکمه را طراحی میکنیم و با margin, padding فواصل متن با دکمه و فاصله دکمه با عناصر اطرافش را تنظیم میکنیم. نکته ای که در اینجا وجود دارد استفاده از css3 gradients (شیب رنگ در css3) است که برای استایل دهی زیبا به دکمه ها استفاده میشود تا هم حالت هاور و هم حالت اکتیو متفاوتی را بتوانید بدون استفاده از عکس های متعدد برای دکمه ایجاد کنید.
[css]
.button {
display:inline-block;
cursor:pointer;
padding:0.5em;
margin:20px;
text-decoration:none;
font:normal 14px tahoma, Helvetica, sans-serif;
text-align:center;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.2em);
-moz-border-radius:0.5em;
border-radius:0.5em;
-webkit-border-radius:0.5em;
-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.5em);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.5em);
box-shadow:0 2px 2px rgba(0, 0, 0, 0.5em);
position:relative;
}
.button:hover {
text-decoration:none;
}
.button:active {
top:1px;
}
.green {
width:150px;
height:25px;
padding:10px;
color:#CCFF66;
background:#339900;
font-size:25px;
border:1px solid #fff;
text-decoration:none;
text-align:center;
line-height:24px;
}
.green:hover {
border-left:1px solid #555;
border-bottom:1px solid #555;
}
.gray {
background:#5c5c5c;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#aaa));
background: -moz-linear-gradient(top, #fff, #aaa);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#aaaaaa’);
color:#666;
border:1px solid #777;
}
.gray:hover {
color:#999;
}
.gray:active {
background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#fff));
background: -moz-linear-gradient(top, #aaa, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#aaaaaa’, endColorstr=’#ffffff’);
color:#666;
}
.orange {
background:orange;
background:-moz-linear-gradient(top, #ffa352, #ff3600);
background:-webkit-gradient(linear, left top, left bottom, from(#ffa352), to(#ff3600));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffa352′, endColorstr=’#ff3600′);
border:1px solid #de4002;
color:#fff2ec;
font-size:32px;
}
.orange:hover {
background:#fe6726;
color:#fff;
}
.orange:active {
background:-moz-linear-gradient(bottom, #ffa352, #ff3600);
background:-webkit-gradient(linear, left bottom, left top, from(#ffa352), to(#ff3600));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff3600′, endColorstr=’#ffa352′);
}
[/css]
[/free_vip]
