Create a Pill Button with different div and background

Shreyash Shetty
2 min readJul 12, 2020

I wandered at many places in web but could not found a source to have a pill button something like this as shown in the picture

The above image is of pill button which consists of a icon , some number and a cross (cancel ) symbol which is the only clickable thing in the entire button.

The above button can be created with the following css and html with javascript as required

The html will have one parent div and one child div as follows:

And then CSS for the same would be :

And basis on the requirement you can add actions for closing the button by clicking the “X” button.

You are done!! Hurray!!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Shreyash Shetty
Shreyash Shetty

Written by Shreyash Shetty

I am a Fullstack JavaScript Developer with core competency in React

No responses yet

Write a response