I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel.
Below is the HTML code for the button:
<a id="settingsButton" data-rel="panel" data-role="button" href="#optionsPanel" data-icon="info" data-iconpos="notext" class="ui-icon-alt ui-icon-nodisc ui-btn-right">Settings</a>
Additionally, here is a JavaScript sample that dynamically sets the style:
function setSettingsButton(){
$("#settingsButton").css({
left:"-15px",
top:$(window).height() / 2 - 30 + "px",
position:"fixed"
});
}
This function is called on document ready.
The current styling of the button looks good, but it is too small. When attempting to adjust the size using style="width: 10%; height: 10%;", the button loses its round shape and appears unattractive.
EDIT: Here is the fiddle link. Any adjustments to the size, such as setting it to "width:10%; height:10%", result in a square and unsightly appearance.
Can you provide any tips on how to style a button that is both visually pleasing and adequately sized?