Side menu animation

In this tutorial you will learn how to create a side menu with animation and also hamburger button animation.

I used 2 elements on the page with class left_menu and page.
left_menu class consists of several elements:

  • menu_btn with 3 <span> elements used for creating hamburger menu icon
  • <ul> element that contains links of the menu

page class consists of two parts:


Bootstrap 3 modal style

If you have used bootstrap then you have certainly used it's modal. It's very useful if we want to display a notification or form, and we do not want to load a page with too much content. In this tutorial, I'll show you several classes of modal with which you can easily change style of modal.


Neon glow text

If you love the neon effects, then this is the tutorial for you. In this tutorial I will show you how to make text with neon effect with several css lines that will allow you to use it immediately or just hover. Through the tutorial I used Ubuntu font with font weight of 700.  
Only thing you need is one <p> element with <span> element in it with text you want. The first element <p> will serve me for a permanent neon effect while a secont one will only be on hover. 


Bootstrap 3 and 4 material buttons with hover effects

Most of probably you used the Bootstrap css framework. It is one of the most popular html, css, and js framework used to develop responsive web pages.
But if you want to customize the bootstrap design to look a little more like google material design in this tutorial, you can see how in just a few css changes the bootstrap buttons can already be the in material design.
What you need to do is make this css set up after bootstrap css to override bootstrap's css.



Subscribe to RSS - css