How to design buttons for mobiles using jQuery EasyUI Mobile?

In today's world, mobile devices are increasingly used to access the internet. Hence, it is essential to design web pages that are mobile-friendly. One of the key components of mobile-friendly web pages is buttons. Buttons are an essential component of any mobile application or web page, and it is vital to design them appropriately. jQuery EasyUI Mobile is a powerful framework that can be used to design buttons for mobiles.

In this article, we will discuss how to design buttons for mobiles using jQuery EasyUI Mobile.

Design The Button Component

To get started with jQuery EasyUI Mobile, we need to include the jQuery and jQuery EasyUI Mobile libraries in our HTML file. We can download these libraries from the jQuery and jQuery EasyUI Mobile websites.

Next, we can style the buttons. It completely depends upon the developer on how to design the button and other components for the UI.


<!DOCTYPE html>
   <title>Button Example</title>
      .my-button {
         background-color: #4CAF50; 
         border: none; 
         color: white; 
         padding: 12px 24px; 
         text-align: center; 
         text-decoration: none; 
         font-size: 2rem; 
         margin: 2rem; 
         border-radius: 2rem; 
         margin: 5vh;
         display: grid;
         place-items: center;
      function clickMe(){
         document.getElementById("my-button").innerHTML="The text is clicked"
   <div class="easyui-navpanel">
      <a href="#" class="easyui-linkbutton my-button" data-options="plain:true" onclick="clickMe()" id="my-button">Click Me!</a>


  • This is an HTML document that uses jQuery EasyUI Mobile to create a button. The code includes a stylesheet for the EasyUI Mobile theme, as well as jQuery and the EasyUI library itself.

  • The button is styled using a custom CSS class called "my-button" which sets various properties such as background color, font size, margin, and border-radius. The button is also placed within an EasyUI "navpanel" container and centered using a CSS grid.


Designing buttons for mobiles using jQuery EasyUI Mobile is easy and straightforward. By following the steps outlined in this article, you can create custom buttons that fit the needs of your mobile application. Whether you need a basic button or a button with custom styles and icons, jQuery EasyUI Mobile provides the tools you need to create professional-looking buttons for mobiles.

Updated on: 17-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started