Skip to Content

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

<style>

.circleButton div.sapMBtnInner {

       height: 300%;

       width: 230%;

       border-radius: 50%;

}

</style>

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({

text:“Click”,

press:funtion(){

sap.m.MessageToast.show(“shaped button clicked”,{duration:1000});

}

});

oButton.addStyleClass(‘circleButton’);

oPage.addContent(oButton);

  return oPage;

Save and run the application;

Round Shape

/wp-content/uploads/2014/12/chrome_604049.jpg

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%;

/wp-content/uploads/2014/12/chrome1_604051.jpg

Oval Shaped Button

   
height
: 200%;

width: 230%;

border-radius: 50%;

/wp-content/uploads/2014/12/chrome3_604052.jpg

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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply