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

logout buttons as buttons (not only links)


Hi,
I'm using demo6, but this problem is probably in all demos.

It's quite common to have logout via POST, so would it be possible to style buttons in the dropdown menus, so it would look the same as the other menu links? something like this

<form method="post" action="/logout/">
<button type="submit" class="menu-link px-5">Sign out</button>
</form>



Thank you


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 (5)


Hi,

The above code should work as expected:

<img src="https://i.imgur.com/6yTbsMK.png" class="w-100"/>

<img src="https://i.imgur.com/DYGpFZg.png" class="w-100"/>

Regards.



Yea, that's what I meant "the same like the regular links"

Sorry for the confusing answer happy

Thank you



Great! All the best with your project!


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi,

Sure you can use the below markup:


<form method="post" action="/logout/">
<button type="submit" class="menu-link px-5 btn w-100">Sign out</button>
</form>


Please give it a try and let us know the result.

Regards.



It does look the same, thank you!

I actually tried .btn-link before and that looked like that's not the way happy


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  :(