مطالب عمومی

آموزش طراحی دکمه html با Css3

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

1491 نفر
3 دقیقه
بروزرسانی در: آبان 4, 1400

فهرست مطالب

یکی از مواردی که در طراحی سایت ها خیلی زیاد استفاده میشوند، دکمه ها هستند. ما میتواینم در هنگام کدنویسی دکمه های html، از عکس ها استفاده کنیم ولی همانطور که میدانید عکس ها حجم زیادی اشغال میکنند و باعث دیرتر لود شدن وب سایت میشوند. ما در این آموزش طراحی سایت، با استفاده از کدهای CSS3 به شما یاد خواهیم داد که چگونه بدون استفاده از عکس، دکمه html طراحی کنید. مشاهده دمو

Untitled-1

[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]

به این صفحه رتبه دهید
بدون دیدگاه
انتشار: مهر 11, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا