• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Show Osom Modal Login “login” element as a button

Discover how to shape as a button style the login and exit menu items added by the Osom Modal Login plugin.

The Osom Modal Login plugin adds an item to the menu to conditionally login or logout, depending on whether the user is logged in or not.

You can customize the text in the plugin settings and by default it is shown as another menu item.

login-element-Osom-Modal-Login
Osom Modal Login default login element.

But you may want to highlight the login element as if it were a button. Luckily you can achieve this with a little CSS.

Osom Modal Login login element as a button.

Let’s see how:

Code snippet to view Osom Modal Login menu items as a button

The Osom Modal Login plugin uses two different classes depending on whether it displays the login or logout item

  • osmlogin (login)
  • logout

So you can use the first one if you only want this style to affect the login element.

To give it a button design, insert this code at the end of the style.css file:

To see this and another 839 code snippets of this website, login or subscribe here.

This is just an example.

You can use modify the colors and shape of the button to your liking.

Conclusions

As you can see, it is very easy to display the login element of the Osom Modal Login plugin in the form of a button.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉

CSS Osom Modal Login WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?