Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Button with anchor style


Dear support!

I am using demo8 HTML theme. In the aside user section, in Sign Out menu item, I need to use button element instead of anchor. How to do that maintaining the same style of anchor. The code I am talking about is:


<!--begin::Menu item-->
<div class="menu-item px-5">
Sign Out
</div>
<!--end::Menu item-->


to:


<div class="menu-item px-5">
<form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
<button type="submit" class="????????">Sign Out</button>
</form>
</div>


Thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

You can use the below markup to put a button tag as the menu link:


<button  type="submit" class="menu-link btn w-100 py-3 px-5">
Sign Out
</button>


Then apply the custom padding class to all menu links to make them similar to the button link:


<!--begin::Menu item-->
<div class="menu-item px-5 my-1">
<a href="#"%20class="menu-link%20py-3%20px-5" target="_blank" rel="noopener noreferrer">
Account Settings
</a>
</div>
<!--end::Menu item-->


If you need any further help please do let us know.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(