آموزش ساخت دکمه با CSS
574 روز پیش
پويا صادقى , آموزش CSS
چطور بدون استفاده از تصاویر، دکمه های زیبا درست کنیم؟
با استفاده از CSS میتونیم دکمه هایی درست کنیم که با حرکت موس تغییر کنن و همونطور که قبلا یاد گرفتیم با CSS3 گرادینت درست کنیم ( آموزش ساخت گرادینت برای فایرفاکس + آموزش ساخت گرادینت برای کروم و سافاری ) میتونیم دکمه هایی به شکل زیر درست کنیم:
آموزش:
اول یه لینک در HTML میسازیم:
<div><a href="http://www.pasargad-graphic.com">Pasargad-Graphic</a></div>
حالا میریم سراغ CSS و برای لینکمون که کلاس btn داره ، طول ، حاشیه ، فونت و رنگ تعیین میکنیم:
a.btn {width: 250px; padding: 10px 25px 10px 25px;
font-family:Constantia;
font-weight:bold;
font-style:italic;
font-size: 20px;
text-decoration: none;
color: #370000;
بعد متن لینک رو سایه دار میکنیم و یه رنگ بکگراند اضافه میکینم.
قبلا درمورد اضافه کردن سایه به متن گفته بودیم 
رنگ بکگراند هم باعث میشه مرورگرهایی مثل اپرا ، اینترنت اکسپلورر و بقیه مرورگرهای قدیمی که گرادینت رو ساپورتن میکنن، دکمه رو به درستی (اما بدون گرادینت) نشون بدن.
text-shadow: 0px 1px 0px #d90404; background-color:#bf0000;
حالا گرادینت رو برای فایرفاکس و کروم و سافاری ایجاد میکنیم:
background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
یک پیکسل border با گوشه های گرد ایجاد میکنیم:
border: 1px solid #7e0000; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
خوب! تا اینجا کد سی اس اس btn شده این:
a.btn { width: 250px;
padding: 10px 25px 10px 25px;
font-family:Constantia;
font-weight:bold;
font-style:italic;
font-size: 20px;
text-decoration: none;
color: #370000;
text-shadow: 0px 1px 0px #d90404;
background-color:#bf0000;
background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
border: 1px solid #7e0000;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}
حالا برای وقتی که موس روی دکمه حرکت میکنه، باید رنگ ها عوض بشه. پس این کد رو هم تو CSS مینویسیم:
a.btn:hover {
color: #2f4300;
text-shadow: 0px 1px 0px #a3db21;
background-color:#7eab13;
background: -moz-linear-gradient(#c6ff62, #7eab13 35%, #425909);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c6ff62),color-stop(.35, #7eab13),color-stop(1, #425909));
border: 1px solid #89b100;
}
تبریک میگم! تموم شد!
کد کامل صفحه:
< !DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pure CSS3 Buttons</title>
<style>
.linear{width:300px; margin:0 auto; height:100px;}
a.btn {
width: 250px;
padding: 10px 25px 10px 25px;
font-family:Constantia;
font-weight:bold;
font-style:italic;
font-size: 20px;
text-decoration: none;
color: #370000;
text-shadow: 0px 1px 0px #d90404;
background-color:#bf0000;
background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
border: 1px solid #7e0000;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
a.btn:hover {
color: #2f4300;
text-shadow: 0px 1px 0px #a3db21;
background-color:#7eab13;
background: -moz-linear-gradient(#c6ff62, #7eab13 35%, #425909);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c6ff62),color-stop(.35, #7eab13),color-stop(1, #425909));
border: 1px solid #89b100;
}
</style>
</meta></head>
<body>
<br />
<div class="linear">
<a href="http://www.pasargad-graphic.com" class="btn">Pasargad-Graphic</a>
</div>
</body>
</html>
