Thursday, March 16, 2017

W3.CSS - Buttons

W3.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used:
Class NameDescription
w3-btnRepresents a standard button. Can be used to style a link as button as well.
w3-btn-floatingRepresents a floating button being circular in design.
w3-btn-floating-largeRepresents a large floating button.

Example

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>

Result

Verify the result.

Standard Buttons

Links as Buttons

Floating Buttons

Large Floating Buttons

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)