آموزش W3CSS

آموزش W3.CSS – دکمه ها

W3.CSS، برای سفارشی کردن دکمه ها، CSSای بسیار زیبا و واکنش گرا داره. CSSهای زیر مورد استفاده قرار میگیرن:

نام کلاس

توضیحات

w3-btn

یک دکمه ی استاندارد را نمایش میده. می تواند استایل یک لینک را به دکمه تغییر بده.

w3-btn-floating

یک دکمه ی شناور با طراحی دایره ای نمایش میده.

w3-btn-floating-large

یک دکمه ی شناور بزرگ را نمایش میده.

   

مثال

w3css_buttons.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body class="w3-container"> 
      <h2>Standard Buttons</h2>
      <button class="w3-btn">Click Me</button>
      <button class="w3-btn w3-teal">Click Me</button>
      <button class="w3-btn w3-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class="w3-btn">Link</a>
      <a class="w3-btn w3-teal">Link</a>
      <a class="w3-btn w3-disabled">Disabled Link</a>

      <h2>Floating Buttons</h2>
      <a class="w3-btn-floating">+</a>
      <a class="w3-btn-floating w3-teal">+</a>
      <a class="w3-btn-floating w3-disabled">+</a>

      <h2>Large Floating Buttons</h2>
      <a class="w3-btn-floating-large">+</a>
      <a class="w3-btn-floating-large w3-teal">+</a>
      <a class="w3-btn-floating-large w3-disabled">+</a> 
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...