::: در حال بارگیری لطفا صبر کنید :::Loading , please wait ...

انجمن کدستانMoisrex

MoisrexMoisrex.rozblog.com
زمان جاریtime : شنبه 16 تیر 1403 - 7:34 بعد از ظهر
نام کاربریusername : پسوردpassword : یاor عضویتregister | رمز عبور را فراموش کردمForgot your password?
شما در سایت ما ثبت نام نکرده اید و یا وارد اکانت کاربری خود نشده اید. از شما خواهشمند هستیم You are not log in to site. Please وارد شویدlogin یاor ثبت نام کنیدregister .
صفحه اصلیHome page / آموزش css / آموزش کد نویسی - ساخت دکمه
آموزش کد نویسی - ساخت دکمه
تعداد بازدیدvisits : 1085
00mostafa00 آفلاین



ارسال هاAnswers : 542
عضویتRegistration date : 28 /12 /1392
حمایت کردهThanks : 260
حمایت شدهThanked : 121
 آموزش کد نویسی - ساخت دکمه

سلامشاید دیده باشید در بعضی از سایت ها برای لینک دادن به آدرسی از دکمه هایی استفادده میکنندیا به عنوان جعبه دانلود ازشون استفاده میکننامروز میخوام آموزشی ساده ولی کاربردی که قبلنا خود بنده دنبالش بودم رو براتون بذارمخوب اول یک دمو بذارم تا بدونید چی میخوام بذارمبرای دیدن دمو کلیک کنیدخوب چیزی رو که میخوایم بسازیم رو بهتون نشون دادمهمونطور که گفتم بسیار ساده استبریم سراغ آموزش

قرار میدهیم که در آن استایل های خود را قرار خواهیم دادسپس بعد از تگ استایل تگی با نام

کد:

باز میکنیم که این تگ داره میفهمونه که کاربر با کلیک روی دکمه کجا برهدر قسمت لینک شما در کد بالا آدرس سایت یا فایلتون قرار میگیره و در داخل تگ a کد دکمهاگر نمیخواین دکمتون لینک داشته باشه نیازی نیست که از کد بالا استفاده کنیدخوب حالا باید دکممون رو بسازیمدر داخل تگ a تگی با نامbuttonایجاد میکنیم دقیقا به این شکل

کد:
متن شما

خوب شما موفق شدید یک دکمه ساده بسازیدشاید بخواین به این دکمه استایل بدیدیعنی مثلا دورش رو خم کنید فونتش رو عوض کنید پس زمینه بذارید و... برای این کار شما باید برای دکمتون یک آی دی در نظر بگیریدبرا قرار دادن آی دی کد زیر را در داخل تگ دکمه قرار میدهید id=\\\"button\\\"یعنی به این صورت

خوب حالا برای اینکه بتوانیم به این آی دی استایل بدیم لازم هست که در تگ استایلی که ایجاد کردیم اینکار رو بکنیم

کد:
#button{

}

با استفاده از کد بالا داریم به مرورگر میفهمونیم که آی دی باتن رو با این استایل بارگذاری کنخوب تا الآن رو که فکر کنم فهمیدیدحالا میریم سرغ استایل دهی و سی اس اسما باید استایل های خودمون رو توی

کد:
#button{}

قرار بدیماول از همه براش میخوایم یک بگاند بذاریمبرای گذاشتن بکگراند باید کد زیر رو توی استایلمون بذاریمbackground:;در بین:;باید کد رنگ یا اسم رنگ رو بنویسید یا میتونید در بین:;به اینصورت استفاده کنیمurl()که با استفاده از این کد میتونیم بکگراند رو به صورت عکس بذاریم(منظورم اینه عکس بذاریم)برای این کار باید آدرس تصویر را در بین)(قرار بدیدخوب حالا میخوایم دور این دکمه خم بشهبرای اینکار باید ازborder-radiusکد بالا استفاده شودکد بالا به مرورگر میفهماند که باید دور دکمه رو خم کنهبرای استفاده از این امکان باید بهش بگید که چند پیکس خم بشهمثلا من 5 پیکسل گذاشتمborder-radius:5px;حالا میخوایم به باکسمون سایه بدیمبرای قرار دادن سایته باید از کد زیر استفاده شودbox-shadowکه کد کامل به این صورت میشودbox-shadow:0px 0px 3px #336f7c;در قسمت پیکسل ها باید فاصله سایه مشخص شود و در قسمت کد رنگ#336f7cرنگ مورد نظرتون رو قرار بدینحالا میخوایم مشخص کنیم که رنگ متنون چی باشهبرای اینکار از کد زیر استفاده میکنیمcolorکد بالا به مرورگر میفهماند که رنگ متن چی باشدمن رنگش رو گذاشتم#dbddddکد کاملcolor:کد رنگ;خوب حالا میخوایم مشخص کنیم فونتش چی باشه و سایزش چقدر باشهبرای اینکار باید از کد زیر استفاده کنیمfontبرای اینکه بگیم فونتش سایزش چقدر باشه باید به پیکس یا هر چیزی مشخص کنیممن سایزش رو زدم13pxو فونتشم بی یکان گذاشتمکد کاملfont:13px b yekan;حالا میخوایم بگیم که وقتی موس رفت روی دکمه رنگ فونت و بکگراند عوض بشهبرای این کار باید در بخش استایل دوباره چنین چیزی اضافه کنیم

کد:
#botton-style:hover{}

این کد همونطور که گفتم داره میگه زمانی که موس میره روش چه تغییراتی بکنهمن فقط رنگ متن و رگ بکگرند رو عوض کردمبرای اینکار باید در بخش هاور دوباره دو کدcolorوbackgroundرو اضافه کنیمولی اینبار اگر دوست دارید میتونید رنگ رو عوض کنیدمن اینجوری کردم

کد:
#botton-style:hover{ background:#214951; color:#fff; transition:0.9s; }

اری کردم که وقتی موس میره روش رنگ متن بشه سفید و بنگ بکگراند هم بشه#214951شاید بگید این کد چیهtransition:0.9s;این داره میگه که این عملیات در طی 9دهم ثانیه انجام بشهخوب حالا کدتون رو توی یک ادیتور آنلاین تست کنید و ببینید چه چیزی درست کردیدکد کامل

کد:
نگین دات این

امیدوارم استفاده کنید با تشکر
سه شنبه 27 آبان 1393 - 23:16
وب کاربرUser's blog ارسال پیامsend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شدهThanks : سپاس هاThanks (1) : smaeal -
smaeal آفلاین



ارسال‌هاAsnwers : 10648
عضویتRegistration date : 18 /11 /1392
حمایت کردهthanks : 18906
حمایت شدهThanked : 5424
 پاسخAnswer 1 : آموزش کد نویسی - ساخت دکمه

- داداش مصطفی لینک دمو کار نمیکنه...

- استایلی که گذاشتی نمایش داده نشده(وقتی کپی میکنید و مستقیماً پیست میکنید اینطوری میشه)

من خودم یه دکمه میزارم:

این از استایل دکمه (button):

کد:
button{

background-color:#f89406;

background-repeat:repeat-x;

background-image:-khtml-gradient(linear,left top,left bottom,from(#fbb450),to(#f89406));

background-image:-moz-linear-gradient(top,#fbb450,#f89406);

background-image:-ms-linear-gradient(top,#fbb450,#f89406);

background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fbb450),color-stop(100%,#f89406));

background-image:-webkit-linear-gradient(top,#fbb450,#f89406);

background-image:-o-linear-gradient(top,#fbb450,#f89406);

background-image:linear-gradient(top,#fbb450,#f89406);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450',endColorstr='#f89406',GradientType=0);

cursor:pointer;

font:12px BYekan,tahoma;

display:inline-block;

margin:2px;

padding:2px 10px;

text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);

color:#3C0303;

border-radius:3px;

-moz-border-radius:3px;

-o-border-radius:3px;

-ms-border-radius:3px;

-webkit-border-radius:3px;

-khtml-border-radius:3px;

border:1px solid #bbb;

box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);

-webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);

-moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);

}

button:hover{

background-position:0px -14px;

}

این هم خود دکمه:

کد:
<button>کدستان،بهترین سایت آموزشی</button>

این هم دمو:

کد:
<style>

button{

background-color:#f89406;

background-repeat:repeat-x;

background-image:-khtml-gradient(linear,left top,left bottom,from(#fbb450),to(#f89406));

background-image:-moz-linear-gradient(top,#fbb450,#f89406);

background-image:-ms-linear-gradient(top,#fbb450,#f89406);

background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fbb450),color-stop(100%,#f89406));

background-image:-webkit-linear-gradient(top,#fbb450,#f89406);

background-image:-o-linear-gradient(top,#fbb450,#f89406);

background-image:linear-gradient(top,#fbb450,#f89406);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450',endColorstr='#f89406',GradientType=0);

cursor:pointer;

font:12px B Yekan,BYekan,tahoma,;

display:inline-block;

margin:2px;

padding:2px 10px;

text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);

color:#3C0303;

border-radius:3px;

-moz-border-radius:3px;

-o-border-radius:3px;

-ms-border-radius:3px;

-webkit-border-radius:3px;

-khtml-border-radius:3px;

border:1px solid #bbb;

box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);

-webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);

-moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);

}

button:hover{

background-position:0px -14px;

}

</style>

<button>کدستان،بهترین سایت آموزشی</button>

===================================================
☼برای تشکر از دکمه « سپاسگزارم » استفاده نمایید☼
چهارشنبه 28 آبان 1393 - 10:00
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
00mostafa00 آفلاین



ارسال‌هاAsnwers : 542
عضویتRegistration date : 28 /12 /1392
حمایت کردهthanks : 260
حمایت شدهThanked : 121
 پاسخAnswer 2 : آموزش کد نویسی - ساخت دکمه

ممنون

ببخشید دیگه خراب در اومد:D
چهارشنبه 28 آبان 1393 - 13:02
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
smaeal آفلاین



ارسال‌هاAsnwers : 10648
عضویتRegistration date : 18 /11 /1392
حمایت کردهthanks : 18906
حمایت شدهThanked : 5424
 پاسخAnswer 3 : آموزش کد نویسی - ساخت دکمه

نه بابا این چه حرفیه...فقط خواستم به شما و به همه کاربرا بفهمونم که وقتی چیزی رو کپی میکنن اول توی نت پد پلاس یا نت پد ساده ویرایشش کنن و بعد بزارن اینجا...همین

با تشکر

===================================================
☼برای تشکر از دکمه « سپاسگزارم » استفاده نمایید☼
چهارشنبه 28 آبان 1393 - 13:44
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شده: سپاس هاThanks (1) : 00mostafa00 -



moisrex
درباره ماAbout us لینک های ماOur links کلمات کلیدیKeywords
انجمن تخصصی کدستان ، ساخته شده توسط فردی با نام مستعار Moisrex می باشد.This forum designed by a person who called Moisrex.

ایمیلE-mail : Moisrex @ Gmail.com 		کدستان,انجمن کدستان,کدنویسی,انجمن پشتیبانی,فروم,رزبلاگ,آموزش کدنویسی,درخواست کد
تمامی حقوق این انجمن مربوط به همین انجمن می باشد | طراحی قالبCopyright (c) By Moisrex , All rights reserved | Desiger : Moisrex