Blogger Ever

Sliding background button without using images with CSS3

This sliding button technique is now used by many developers and somehow I observed that they are using the technique which is not appropriate for it.Instead I've codded a snippet on Codepen as it is showing below.

Pen 1

See the Pen Background sliding button 2 by Mohammad Hamza Dhamiya (@mohammadhamza) on CodePen

Pen 2

See the Pen Sliding background button by Mohammad Hamza Dhamiya (@mohammadhamza) on CodePen
These above two examples uses simple pseudo elements technique and CSS transitions are used to make animations.

Do not remember the following points

  • add position:relative in the button;
  • use less z-index in pseudo elements i.e :after and :before

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.