How to Have an Onclick Effect in Css

Can I have an onclick effect in CSS?

The closest you'll get is :active:

#btnLeft:active {
    width: 70px;
    height: 74px;
}

However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.

Is there a css equivalent of onclick from the html element?

if you want to do it purely through css you have to use :active or maybe :focus:

div:hover  { color: red; }  /* mouse-over */
div:active { color: red; }  /* mouse-down (this cause also focus) */
input:focus{ color: red; }  /* got focus (by tab key or mouse-down) */

/* for <a> element: */
a:link    { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */

Note: the :active does not stay permanent after the user release the mouse button for elements that does not take focus (like as a div) but it works for elements like as text inputs or buttons. there is a workaround for it called "Checkbox Hack" where you use a connected label and checkbox input and some other element you are trying to control..

Also, if you want to change css class or inline styles, you could do as following:

 <div onclick="this.style['border'] = '2px solid red';">Click me</div>

How to style a clicked button in CSS

This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a> tags))

button{  background-color:yellow;}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a {  color: orange;}
a.button{  color:green;  text-decoration: none;}
a:visited {  color: purple;}
a:active {  color: blue;}

<button>Hover and Click!</button><br><br>
<a href="#">Hello</a><br><br><a class="button" href="#">Bye</a>

placeholder(input) onclick effect in CSS3

Try to pu outline: none; on focus :

input {  
  border:none;
  border-bottom: 2px black solid;
}
input:focus{
    border:none;
    border-bottom: 2px black solid;
    outline: none;
}

<input type="text" />

Onclick CSS button effect

You should apply the following styles:

#button:active {
    vertical-align: top;
    padding: 8px 13px 6px;
}

This will give you the necessary effect, demo here.

How can I get onclick event to work for changing CSS attributes?

getElementsByTagName returns array instead of a single element.
So you will have to access an element like this getElementsByTagName("body")[0].
Hope this would help.

Parent and child component both have button, when click child button, parent button invoked

This is called event bubbling.

when you click the button you're also implicitly clicking the element it is inside.

Basically, when you click an element, it will then proceed to "bubble up" to the top of the DOM, invoking the onClick for every element.

You can prevent this by using event.stopPropagation().

button.addEventListener('click', e => {
  e.stopPropagation();
  // other stuff
});