Skip to Content
Author's profile photo Ranjit Rao

Changing the shape of sap.m.Button in SAPUI5

Now in this blog we will see how to create a round button. The thought behind this blog is to play with the shape of the button.We would use the a bit css to change the boundary of the button.

For that create a SAPUI5 mobile project.

In the index.html add the following code to within the <head> tag:

index.html –<style> tag


.circleButton div.sapMBtnInner {

       height: 300%;

       width: 230%;

       border-radius: 50%;



Now in the createContent of the view.js paste the following code:

createContent of view.js

var oPage = new sap.m.Page({

title: “Round Button Demo”


  var oButton=new sap.m.Button({


press:funtion(){“shaped button clicked”,{duration:1000});





  return oPage;

Save and run the application;

Round Shape


Now in the <style> tag change the height and width and border-radius to find different shapes:

Round Edged Button

height: 300%;

width: 230%;

border-radius: 20%;


Oval Shaped Button

: 200%;

width: 230%;

border-radius: 50%;


So, keep changing the parameters to find the shape which fits your requirement.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.