Edit The Code:
See Result »
Try it Yourself - ©
w3ii.com
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/lib/w3.css"> <link rel="stylesheet" href="../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <body> <div class="w3-container"> <p>Floating Buttons:</p> <a class="w3-btn-floating w3-ripple w3-red"><i>+</i></a> <a class="w3-btn-floating w3-ripple w3-teal"><i class="fa fa-plus"></i></a> <a class="w3-btn-floating w3-disabled"><i class="fa fa-plus"></i></a> <p>Large Floating Buttons:</p> <a class="w3-btn-floating-large w3-ripple w3-red"><i>+</i></a> <a class="w3-btn-floating-large w3-ripple w3-teal"><i class="fa fa-plus"></i></a> <a class="w3-btn-floating-large w3-disabled"><i class="fa fa-plus"></i></a> </div> </body> </html>