In this tutorial, we will learn JQuery UI Button Example

jQueryUI also provides a button() method to transform the HTML element into themeable buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.



Example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Button - Default functionality</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style type="text/css">
        .main-class{
            padding:10px 10px 50px 10px;
            margin:40px auto;
            width:35%;
            color:#008B8B;
            border-radius:5px;
            text-align: center;
            border:2px solid #008B8B;
        }  
    </style>
</head>
<body>
	<h2>JQuery UI Button Example - rathorji.in/h2>
    <div class="main-class">
        <div class="widget">
            <h1>Widget Buttons</h1>
            <button>Laravel</button>
            <input type="submit" value="Php">
            <a href="#">Jquery</a>
        </div>
        <h1>CSS Buttons</h1>
        <button class="ui-button ui-widget ui-corner-all">Sql</button>
        <input class="ui-button ui-widget ui-corner-all" type="submit" value="Node Js">
        <a class="ui-button ui-widget ui-corner-all" href="#">Bootstrap</a>
    </div>

    <script>
        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $( "button, input, a" ).click( function( event ) {
              event.preventDefault();
            });
        });
    </script>
</body>
</html>

May this example help you.