W3CSS Buttons

Now we have come to more practical stuff. We have covered panels, containers, padding, margins, displays etc till now. Now we are moving towards real building blocks of a website. We shall start our discussion with buttons. Buttons are one of the most integral features of website. Buttons are there for user to take a certain action on a website. W3CSS buttons are styled via myriad of classes. In this article and the upcoming one, we shall discuss buttons in details. Let’s start our discussion with simple buttons.

There are seven basic button classes: w3-btn class is used to create a basic button. The w3-btn-group class creates group of button. Similarly w3-btn-floating creates a floating circular button. W3-btn-block creates a full width button. Let’s see these classes in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

     <button class="w3-btn">Click me</button>
     <button class="w3-btn-floating">Click me</button>
     <button class="w3-btn-floating-large">Click me</button>
     <button class="w3-btn-bar">Click me</button>
     <button class="w3-btn-block">Click me</button>
     <button class="w3-btn-ripple">Click me</button>
        
        
</div>
    
    
</html>

Download the code Try the code

W3CSS Buttons Color

You can use w3-color classes along with button class to give different colors to the button. You can also add w3-hover-color class to a button to change its background color upon mouse hover. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

     <button class="w3-btn w3-red w3-hover-pale-red">Click me</button>
     <button class="w3-btn w3-yellow w3-hover-pale-yellow">Click me</button>
     <button class="w3-btn w3-green w3-hover-pale-green">Click me</button>
     <button class="w3-btn w3-purple w3-hover-yellow">Click me</button>
     <button class="w3-btn w3-pink w3-hover-red">Click me</button>

         
</div>
    
    
</html>

Download the code Try the code

In the above code we have five buttons with colors, red, yellow, green, purple and pink. We have also added hover colors to these buttons. If you open the above page in browser, you shall see five buttons of different colors. If you hover your mouse over these buttons, their background color shall change.

Button Shapes and Sizes

You can create round buttons by adding w3-round-size class to W3CSS button. Size can large, xlarge and xxlarge. Similarly, you can change size of a button via w3-tiny, w3-small, w3-medium, w3-large, w3-xlarge, w3-xxlarge, w3-xxlarge and w3-jumbo classes. Lets take a look at the following example to see buttons of different sizes and shapes.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

     <button class="w3-btn w3-red w3-round">Click me</button>
    <button class="w3-btn w3-red w3-round-xlarge">Click me</button>
    
    <button class="w3-btn w3-red w3-tiny">Click me</button>
    <button class="w3-btn w3-red w3-jumbo">Click me</button>
      
</div>
     
</html>

Download the code Try the code

<<< W3CSS DisplayW3CSS Notes >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .