keyboard_return  چسبون مقالات آموزشی طراحی دکمه در css
  1. طراحی دکمه در css

آموزش ساده و کاربردی طراحی دکمه در css

سلام دوستان عزیز تو این جلسه قصد داریم آموزش طراحی دکمه در css رو خدمت شما آموزش بدیم خب ابتدا ویرایشگر متن رو باز کنین (پیشنهاد من به شما اینه که از ادیتور sublime text استفاده کنین البته می تونین از Notepad++ و یا dreamweaver هم استفاده کنین) مرحله اول اینه که کدهای مربوط به صفحه html رو بنویسید (کدهای زیر رو تو ادیتور کپی کنین)

<!DOCTYPE html> 
<html>
<head> 
	<meta charset="utf-8">
	<title>CSS Button</title>
</head> 
<body>
	<h1>آموزش برنامه نویسی با <a href="http://www.chasboon.ir">چسبون</a></h1>
	<div id="content"> 
		<a class="btn" href="#">Click Me!</a> 
		<a class="btn2" href="#">Click Me!</a>
	</div>
</body> 
</html>

خب فایل مورد نظر رو با نام index.html در محل دلخواه ذخیره کنین. اگه این فایل رو اجرا کنین صفحه ای مثل شکل زیر باید ببینین

آموزش طراحی دکمه در css

همونطور که می بینید صفحه مورد نظر بسیار ساده و فاقد زیبایی لازم هست. خب تو این مرحله نوبت به افزودن کدهای css میرسه حالا کدهای زیر رو مطابق شکل داخل تگ head وارد کنید و صفحه رو مجددا ذخیره کنید.

<style type="text/css"> 
h1{
	text-align: center
}
a{
	text-decoration: none
}
#content{
	text-align: center;
	display: inline-block; 
	position: absolute;
	left: 45%;
	top: 50%
}
.btn{
	text-decoration: none;
	padding: 7px 20px; 
	border-radius: 5px;
	background-color: #55BED5;
	color: #FFF;
	border: 1px solid #d7e1ff;
	cursor: pointer;
	top: 50%
}
.btn2{
	text-decoration: none;
	padding: 25px 5px;
	border-radius: 50%;
	background-color: #800000;
	color: #FFF;
	border: 1px solid #600000;
	cursor: pointer;
	top: 50%;
	margin: 0 48px
}
.btn:hover{
	background-color: #0EB3F5;
	border:1px solid #2BAEE2
}
.btn2:hover{
	background-color: #990000
}
</style>

خواهید دید که محل قرار گیری دکمه ها و شکل ظاهری دکمه ها تغییر کرده. خب یه توضیح مختصر از کد های بالا بدم: تگ body بدنه سایت رو تشکیل میده و شما عناصری رو که داخل این تگ وارد می کنید در صفحه نمایش داده خواهد شد. با استفاده از تگ <a> دو تا لینک ساختیم که قراره برامون کار دکمه رو انجام بده. به طور کل شما میتونین دستورات css رو به صورت داخلی و یا خارجی به صفحه سایت اضافه کنید که ما تو این آموزش از روش داخلی استفاده کردیم یعنی داخل همین صفحه یه style از نوع css فراخوانی کردیم و دستورات مورد نظر رو داخلش نوشتیم برای استایل دادن به عناصر در css ابتدا باید عناصر مورد نظر رو با id و یا calss مشخص کنیم. همونطور که تو کد اول می بینید ما یه div با id="content" ساختیم و تگ a را هم با class="btn" مقدار دهی کردیم. برای دسترسی به id ها در css از "#" اول نام id و برای دسترسی به کلاسها در css از "." ابتدای نام کلاس استفاده می کنیم. یعنی اگه یه عنصر با "id = "Button  و یه عنصر با "class = "link تو html داشته باشیم، میتونیم تو css  به شکل زیر بهش دسترسی داشته باشیم:

#Button {
 //دستورات مربوط به css 
}
.link {
 //کدهای مربوط به css 
}

خب فکر میکنم برای امروز کافی باشه. این آموزش ادامه دارد لطفا تا کامل شدن آموزش با ما همراه باشید.

دانلود فایل پیوست

قسمت قبلی: آموزش ساده و کاربردی css قسمت اول

برای مطالعه بیشتر میتونین از سایت w3school استفاده کنید

طراحی دکمه در css - 4.2 از 5 بر اساس 150 رای

امتیاز کاربران

طراحی دکمه در css
دیدگاه‌ها

دیدگاهی وجود ندارد

2024 © Copyright کليه حقوق مادی و معنوی براي چسبون محفوظ است و هرگونه کپی برداری پیگرد قانونی دارد.