ورود به سايت


رمز عبور را فراموش کردم ؟
ثبت نام سريع
نام کاربری :
رمز عبور :
تکرار رمز :
موبایل :
ایمیل :
نام اصلی :
کد امنیتی :
 
کد امنیتی
 
بارگزاری مجدد
آخرين ارسالي ها
آموزش Image Grid تاريخ : یکشنبه 17 مرداد 1400
طراحی شبکه تصاویر واکنش گرا تاريخ : سه شنبه 29 تیر 1400
آموزش ساخت تصاویر لایت باکس تاريخ : دوشنبه 28 تیر 1400
آموزش ساخت Image Modal با استفاده از HTML و CSS3 تاريخ : چهارشنبه 23 تیر 1400
آموزش ساخت گالری اسلاید شو برای سایت تاريخ : سه شنبه 22 تیر 1400
آموزش ساخت اسلايدشو براي وبسايت تاريخ : سه شنبه 15 تیر 1400
آموزش ساخت دکمه Back to Top برای صفحات وب تاريخ : سه شنبه 18 خرداد 1400
گرد کردن گوشه دکمه ها با CSS تاريخ : دوشنبه 17 خرداد 1400
آموزش ساخت دکمه با متن تاريخ : چهارشنبه 12 خرداد 1400
آموزش ساخت دکمه های تمام عرض در سایت تاريخ : دوشنبه 10 خرداد 1400
پشتیبانی انلاین
سلام دوست من به سايت آموزش برنامه نویسی خوش آمديد لطفا براي استفاده از تمامي امکانات

دانلود فايل , شرکت در انجمن و گفتگو با ساير اعضا در سايت ثبت نام کنيد




گرد کردن گوشه دکمه ها با CSS

تاريخ: امروز, : دوشنبه 17 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,


گرد کردن گوشه دکمه ها با CSS

یادگیری طراحی سایت

 آموزش ساخت دکمه های دایره ای شکل


در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های Round Buttons ایجاد کنیم.



قدم اول : کد HTML را اضافه کنید.
مثال :

<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

قدم دوم :   کد CSS را اضافه کنید.
مثال :

               .button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}
 
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

نمونه یک:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>

<h2>دکمه های دایره ای شکل</h2>
<p>با استفاده از ویژگی زیر به دکمه ، حاشیه های دورانی اضافه کنید</p>
<p>"border-radius"</p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

</body>
</html>

نمونه دکمه Round Buttons  

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



امتياز : نتيجه : 5 امتياز توسط 1 نفر مجموع امتياز : 5

بازديد : 90

نمايش اين کد فقط در ادامه مطلب براي قرار کد مورد نظر به ويرايش قالب مراجعه کنيد
برچسب ها : آموزش html css , فیلم اموزش طراحی سایت , آموزش جاوا اسکریپت , دوره آموزش طراحی سایت ,

مطالب مرتبط
آموزش Image Grid
طراحی شبکه تصاویر واکنش گرا
آموزش ساخت تصاویر لایت باکس
آموزش ساخت Image Modal با استفاده از HTML و CSS3
آموزش ساخت گالری اسلاید شو برای سایت
آموزش ساخت اسلايدشو براي وبسايت
آموزش ساخت دکمه Back to Top برای صفحات وب
آموزش ساخت دکمه با متن
آموزش ساخت دکمه های تمام عرض در سایت
آموزش طراحی منو برای دکمه بیشتر "More"

موضوعات
? آموزش طراحی سایت آموزش React Native آموزش سی شارپ آموزش جاوا آموزش پایتون آموزش sql آموزش ASP.NET Core آموزش داده کاوی و یادگیری ماشین

1400
1399
1398
1391
آمار سايت
افراد آنلاين : 1
بازديد امروز : 20
بازديد ديروز : 69
هفته گذشته : 204
ماه گذشته : 506
سال گذشته : 5,179
کل بازديد : 19,442
کل مطالب : 171
نظرات : 0
تعداد اعضا : 1

امروز : شنبه 29 اردیبهشت 1403

طراح قالب

مترجم قالب

جديدترين مطالب روز

فيلم روز

آموزش برنامه نویسی