Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ranjit_rao
Participant

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

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

   
height
: 200%;

width: 230%;

border-radius: 50%;

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

Labels in this area