با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم. به آموزش چگونگی کار با طراحی عناصر button در css بپردازیم. در این پست آموزشی یاد خواهید گرفت که چه طور با تغییر دادن و دستکاری style عناصر button ، این عناصر را زیباتر و جذاب تر کنید. حتی می توانید قالب کلی یک button را به اشکال هندسی مختلف و جذاب تغییر دهید.
در آموزشهای قبلی css ما به موضوعاتی نظیر توابع انتقال و جابه جایی عناصر دو بعدی در css ، توابع انتقال و جابه جایی عناصر سه بعدی در css و … پرداخته ایم.
در ادامه آموزش در این مطلب به موضوع کار با طراحی عناصر button در css و تغییر دادن style آن ها می پردازیم.
طراحی عناصر html در css نظیر button ها ، گزینه های زیادی مانند font-size ، background ، border و … را در بر می گیرد.
مثال: طراحی ساده و پایه یک button :
1 2 3 4 5 6 7 8 9 10 | .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } |
با استفاده از ویژگی background-color می توانید رنگ button را تغییر دهید.
مثال:
1 2 3 4 5 | .button1 {background-color: #4CAF50;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ |
به راحتی می توانید با ویژگی font-size اندازه فونت را تعیین کنید.
مثال:
1 2 3 4 5 | .button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;} |
با ویژگی padding می توانید فاصله داخلی محتوای button را تنظیم کنید.
مثال:
1 2 3 4 5 | .button1 {padding: 10px 24px;} .button2 {padding: 12px 28px;} .button3 {padding: 14px 40px;} .button4 {padding: 32px 16px;} .button5 {padding: 16px;} |
با استفاده از ویژگی border-radius می توانید گوشه های button را به میزان دلخواه گرد کنید.
مثال:
1 2 3 4 5 | .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;} |
مثال ۲: تغییر دادن رنگ border یک button :
1 2 3 4 5 | .button1 { background-color: white; color: black; border: 2px solid #4CAF50; /* Green */ } |
با استفاده از انتخابگر :hover
برای زمانیکه ماوس روی button می رود style جدیدی به آن اعمال می کنیم.
نکته: از خصوصیت transition-duration
برای مشخص کردن سرعت رویداد hover استفاده می کنیم.
1 2 3 4 5 6 7 8 9 10 | .button { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: #4CAF50; /* Green */ color: white; } ... |
برای ایجاد افکت سایه نیز می توانید از ویژگی box-shadow استفاده کنید.
مثال:
1 2 3 4 5 6 7 | .button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } |
برای اینکار باید خصوصیت cursor را برابر با مقدار not-allowed قرار دهید. و برای اینکه غیر فعال بودن button مشخص باشد. میتوانید میزان opacity آن را تغییر دهید.
مثال:
با استفاده از خصوصیت width می توانیم عرض عناصر button را مشخص کنیم :
1 2 3 | .button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;} |
ابتدا خصوصیت margin را از button های مورد نظر حذف کرده ، سپس ویژگی float را با left مقدار دهی کنید.
مثال:
مثال ۲- می توانید برای مجزا بودن button های یک گروه border آن ها را مشخص کنید:
1 2 3 4 | .button { float: left; border: 1px solid green; } |
مثال ۳- برای گروه بندی عمودی button ها، به جای استفاده از ویژگی float:left
از display:block
استفاده کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <style> .container { position: relative; width: 100%; max-width: 400px; } .container img { width: 100%; height: auto; } .container .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #f1f1f1; color: black; font-size: 16px; padding: 16px 30px; border: none; cursor: pointer; border-radius: 5px; text-align: center; } .container .btn:hover { background-color: black; color: white; } </style> </head> <body> <h2>Button on Image</h2> <p>Add a button to an image:</p> <div class="container"> <img src="img_lights.jpg" alt="Snow" style="width:100%"> <button class="btn">Button</button> </div> </body> </html> |
می توانید با استفاده از قابلیت transition و رویداد hover برای حرکت ماوس روی button افکت های خاص خود را تعریف کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <style> .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } </style> </head> <body> <h2>Animated Button</h2> <button class="button" style="vertical-align:middle"><span>Hover </span></button> </body> </html> |
مثال-۲ تعریف افکت در رویداد active :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <style> .button { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button:hover {background-color: #3e8e41} .button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </head> <body> <h2>Animated Buttons - "Pressed Effect"</h2> <button class="button">Click Me</button> </body> </html> |
مثالی دیگر از افکت در رویداد hover:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .button { background-color: #f4511e; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; opacity: 0.6; transition: 0.3s; display: inline-block; text-decoration: none; cursor: pointer; } .button:hover {opacity: 1} </style> </head> <body> <h2>Fading Buttons - "Fade in Effect"</h2> <button class="button">Hover Over Me</button> </body> </html> |
اعمال افکت در رویداد Click :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <style> .button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .button:after { content: ""; background: #f1f1f1; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } </style> </head> <body> <h2>Animated Button - Ripple Effect</h2> <button class="button">Click Me</button> </body> </html> |
یکی از عناصر پر کاربرد و بخش های مهمی که تقریبا در تمام وب سایت ها بکار می رود عنصر button هستند، که style های متنوعی برای این عنصر نیز در CSS قابل پیاده سازی است، که در مباحث فوق مرور کلی بر کار با طراحی عناصر button در css داشته به برخی از این Style ها نیز اشاره کردیم.
arash
وبسایت خوبی دارید و همینطور مطالب خوبی هم بصورت رایگان با تست فوری ارایه میدید
بهتون قول میدم که اگه کمی تبلیغ کنید وبسایتتون یدونه میشه
پی وی لرن
ممنون نظر لطف شماست، قرار است به زودی یک سری تبلیغات گسترده انجام دهیم تا وب سایت پی وی لرن را به همگان معرفی کنیم.
محمدحسین
با سلام و تشکر از وبسایت خوبتون
من به همین شیوه هایی که آموزش دادین یه دکمه درست کردم یه مشکل کوچیک دارم، در قالب وردپرسی که استفاده می کنم یه دکمه ای نوشته شده که در صفحه محصول نمایش داده میشه با عنوان علاقه مندی ها، وقتی این دکمه ای که خودم تعریف کردم رو قرار میدم در نمایش دقیقا میوفته بالای دکمه علاقه مندی ها و بینشون هیچ فاصله نمیوفته و دکمه علاقه مند ی ها در زیر دکمه تعریف شده قرار می گیره ولی به هم چسبیده هستن. می خواستم بدونم چطور میشه زیر دکمه تعریف شده فاصله انداخت تا دکمه ها از هم جدا بشن؟
پی وی لرن
با سلام
شما می توانید یک margin چند پیکسلی از پایین بدین تا دکمه ها با هم فاصله داشته باشند. و یا می توانید از تگ br استفاده کنیم
علی
با سلام و عرض ادب وقت بخیر و خسته نباشید خدمت شما به نظر من این سایت خیلی مطالب خوب و خلاصه ای درباره html/css داره و من که استفاده بردم و اینکه به نظرم این سایت جای پیشرفت زیادی داره و اینکه بهتره مطالب بیشتری منتشر کنید و اینکه یکمم رو گرافیک سایتتون کار کنین تا افراد بیشتری جذب کنید با تشکر
پی وی لرن
ممنون و با سپاس بابت نظر و پیشنهاد شما سعی می گردد موارد بیشتری درج گردد و اصلاحات مد نظر انجام گردد.