Detailed bootstrap Pure CSS3 arrow button style

Brief tutorials

This is a pure CSS3 arrow button style based on the bootstrap. This button creates an arrow button pointing to the left or right by modifying the button style of the native bootstrap.

Installation

You can install the bootstrap arrow button file via NPM or bower.

NPM Install bootstrap-directional-buttons Bower Install Bootstrap-directional-buttons

How to use

Introducing bootstrap style files and bootstrap-directional-buttons.css files to the page

<link rel= "stylesheet" type= "Text/css" href= "path/to/css/bootstrap.min.css" ><link rel= "stylesheet" type= " Text/css "href=" Path/to/css/bootstrap-directional-buttons.css ">

HTML structure

It is only necessary to add the Btn-arrow-left or Btn-arrow-rightclass class to the button. If you want a set of arrow buttons to have no gaps between them, you can place them in a container with a class of btn-group.

<button type= "button" class= "btn btn-primary btn-arrow-left" > Arrow left button </button><button type= "button" class= "btn btn-success btn-arrow-right" > Arrow right button </button>