Search results

Customize Button Size

15 Oct 2021 / 1 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.

razor
customsize.cs
Copied to clipboard
@Html.EJS().Button("largebtn").Content("Large Button").CssClass("e-big-btn").Render()
@Html.EJS().Button("smallbtn").IconCss("e-icons e-add-icon").CssClass("e-small-btn").Render()

<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>
Copied to clipboard
public ActionResult CustomSize()
{
    return View();
}