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

Pen 2

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