Customize Button Size

14 Mar 20221 minute to read

Button size can be customized by setting height and width for the button element.

In the following sample, the height and width of the large button is customized as 50px and 120px and the height and width of the small button is customized as 30px and 25px.

CSHTML

<ejs-button id="largebtn" cssClass="e-big-btn" content="Large Button"></ejs-button>
<ejs-button id="smallbtn" cssClass="e-small-btn" iconCss="e-icons e-add-icon"></ejs-button>

<style>

.e-big-btn {
  height: 50px;
  width: 120px;
}

/* To Customize small button */
.e-small-btn {
  height: 30px;
  width: 25px;
}

.e-small-btn.e-icon-btn {
  padding: 0 6px;
  line-height: 24px;
}

button {
  margin: 25px 5px 20px 20px;
}

.e-add-icon::before {
  content: '\e823';
}

</style>

Customsize.cs

public ActionResult CustomSize()
{
    return View();
}