How to make a Shadow Button using jQuery Mobile?

Last Updated : 23 Jul, 2025

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Shadow Button using jQuery Mobile. We will be using different types of UI classes and types to make up the markup buttons.

Example 1: In this example, we will use an anchor tag with ui-btn ui-shadow class to make a button.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src=
"http://code.jquery.com/jquery-1.11.1.min.js">
    </script>

    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>

<body>
    <center>

        <h4>
            Shadowed Anchor using
            jQuery Mobile
        </h4>
    </center>

    <a href="#" 
       class="ui-btn ui-shadow">
        Shadowed Anchor
    </a>
</body>

</html>

Output:

Example 2: In this example, we will use button tag with class="ui-btn ui-shadow" to create button with shadow.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src=
"http://code.jquery.com/jquery-1.11.1.min.js">
    </script>

    <script src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</head>

<body>
    <center>
        <h4>
            Shadowed Button using jQuery
        </h4>
    </center>

    <button class="ui-btn ui-shadow">
        Shadowed Button
    </button>
</body>

</html>