How to make buttons that replace each other?

Question

css

What I need - I need to make a button or two buttons, when pressed, one or the other would be shown. At the same time, I want to consider and ask you to tell me how it will be done more correctly on pure html + css, and on bootstrap, which I also use in the project.
What's the problem - I'm doing everything related to layout for the first time and I'm not very good at it. So what I'm doing is
creating a div.button-container which contains the basic parameters like width height, shape. And in this div.button-container I put one instance of div.button in which, in turn, depending on the value of the flag in js, I change the .skin-a and skin-b classes. This changes the visualization of the button.
But I can't help but feel that
a) I need to be consistent with bootstrap
b) there is already an implementation of this
c) I'm doing it wrong
...
Here's what I got - codepen.io/anon/pen/ZGwVZE (only code, without assets)
And here's the question, it's not right that I just put image containers ? Do you need to at least throw a div into it? Or maybe two divs for each state? How do you make mega html-schiki? ))

Answer 1

Checkbox variations
cssdeck.com/labs/css-checkbox-styles
Or google toggleClass for normal buttons.