Change how it looks when it is touched

01 / 05

With no response, nobody thinks it is pressable

Build it to look like a button and, if nothing happens when it is touched, people think "perhaps it is only a picture".

Give things that can be pressed a response. That is what this lesson is about.

02 / 05

Add :hover on the end of a selector and the rule applies only while the cursor is over it.

The ordinary look of .btn stays as it is, and gets written over only while the cursor is there.

.btn {  background-color: #c85a2b;}.btn:hover {  background-color: #8c3d18;}

03 / 05

Over a link the cursor turns into a pointing hand. But parts made out of a div or a button do not do that.

Write cursor: pointer; and the shape says it can be pressed.

.btn {  cursor: pointer;}

04 / 05

A colour that switches in an instant looks a little rough. Write transition and it takes time over the change.

The value is how many seconds the change takes. About 0.3s is right. The point is to write it on the ordinary side, not the :hover side.

.btn {  transition: 0.3s;}

05 / 05

Use :active (while it is being pressed) and you can thin the shadow to make it look sunken.

With that movement from lifted to sunken, the feel of a finger pressing comes across. Have a go.

.btn:active {  box-shadow: 0 1px 0 #8c3d18;}