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.


<!doctype html>
<html lang="en">
    <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="">
    <script src=""></script>
    <script src=""></script>
    <style type="text/css">
            padding:10px 10px 50px 10px;
            margin:40px auto;
            text-align: center;
            border:2px solid #008B8B;
	<h2>JQuery UI Button Example ->
    <div class="main-class">
        <div class="widget">
            <h1>Widget Buttons</h1>
            <input type="submit" value="Php">
            <a href="#">Jquery</a>
        <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>

        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $( "button, input, a" ).click( function( event ) {

May this example help you.