Fill Circle-shaped Div From Center With Color On Click

I have a 'circular-shaped' div with class = 'complete-button' (height/width =27px, border radius = 12px). I'd like to change the background color of this div on-click, starting fro

Solution 1:

Use this CSS:

div.button:after {
  content: '';                 /* needed for rendering */position: relative;          
  display: block;              /* so we can set width and height */border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */background: red;
  top: 50%;                    /* center vertically */transform: translateY(-50%); /* center vertically */transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

Then toggle the selected class on click.

Snippet

$('div').click(function() {
  $(this).toggleClass('selected');
});

div.button {
  height: 27px;
  width: 27px;
  border-radius: 50%;
  background: green;
}

div.button:after {
  content: '';                 /* needed for rendering */position: relative;          
  display: block;              /* so we can set width and height */border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */background: red;
  top: 50%;                    /* center vertically */transform: translateY(-50%); /* center vertically */transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="button"></div>

Solution 2:

You define your transition effects in css, and use js to perform simple class toggle.

Play with it on codepen

html:

<buttonclass="myButton">My Button</button>

css:

.myButton{
  margin-left:auto;
  margin-right: auto;
  display: block;

  transition: background-color,height,width 0.5s ease;

  background-color: red;
  height: 100px;
  width: 100px;
  border-radius: 49px;

}

.myButton.on{
  background-color: yellow;
  height: 120px;
  width: 120px;
  border-radius: 59px;
}

JS:

$(function(){

  $('.myButton').click(function(){
    $(this).toggleClass('on');
  });

})();