The done button

Done button animated

The done button clicking effect is done by using the margin-top and box-shadow.

1#close-welcome-btn {
2  margin-top: 0px;
3  box-shadow: 0 5px 0 0 rgba(108,65,44,0.6);
4}
5#close-welcome-btn:active {
6  margin-top: 3px;
7  box-shadow: 0 2px 0 0 rgba(108,65,44,0.6);
8}

The margin-top value on active state is the difference between both box-shadow Y-axis.

Note: In order to get the active CSS works in mobile webkit, we need to have ever listened to any Touch event, including touchStart event.

What’s next? We’re going to take a look at “Project 4 – Rain or Not”.

◀ Welcome tutorial with style Project 4 – Rain or Not ▶

makzan.

The done button

Makzan | Mobile web app dev with phonegap | Table of Content