Process

Process diagram


small, letters
> #click-custom-5fc08cb8d5bc8.process-box .front { background-color: #e1e3e5; } #click-custom-5fc08cb8d5bc8.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #e1e3e5; -moz-box-shadow:0 0 0 1px #e1e3e5; box-shadow:0 0 0 1px #e1e3e5; }#click-custom-5fc08cb8d5bc8.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d5bc8.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
A

Step A

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

> #click-custom-5fc08cb8d5f59.process-box .front { background-color: #e1e3e5; } #click-custom-5fc08cb8d5f59.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #e1e3e5; -moz-box-shadow:0 0 0 1px #e1e3e5; box-shadow:0 0 0 1px #e1e3e5; }#click-custom-5fc08cb8d5f59.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d5f59.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
B

Step B

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

> #click-custom-5fc08cb8d6222.process-box .front { background-color: #e1e3e5; } #click-custom-5fc08cb8d6222.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #e1e3e5; -moz-box-shadow:0 0 0 1px #e1e3e5; box-shadow:0 0 0 1px #e1e3e5; }#click-custom-5fc08cb8d6222.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d6222.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
C

Step C

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

> #click-custom-5fc08cb8d678b.process-box .front { background-color: #e1e3e5; } #click-custom-5fc08cb8d678b.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #e1e3e5; -moz-box-shadow:0 0 0 1px #e1e3e5; box-shadow:0 0 0 1px #e1e3e5; }#click-custom-5fc08cb8d678b.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d678b.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
D

Step D

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Process diagram


medium icons
>#click-custom-5fc08cb8d76b2.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d76b2.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
01

Step 1

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#click-custom-5fc08cb8d7c60.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d7c60.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
02

Step 2

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#click-custom-5fc08cb8d7fb8.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d7fb8.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
03

Step 3

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#click-custom-5fc08cb8d8415.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8d8415.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }
04

Step 4

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Process diagram


medium icons, diamond style, custom hover colors
>#click-custom-5fc08cb8d927f.process-box:hover .front { background-color: #19b9c8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.4); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.4); box-shadow:0 0 0 15px rgba(25,185,200,0.4); } #click-custom-5fc08cb8d927f.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px #19b9c8; -moz-box-shadow:0 0 0 3px #19b9c8; box-shadow:0 0 0 3px #19b9c8; }
01

Step 1

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#click-custom-5fc08cb8d9629.process-box:hover .front { background-color: #6ec878; -webkit-box-shadow:0 0 0 15px rgba(110,200,120,0.4); -moz-box-shadow:0 0 0 15px rgba(110,200,120,0.4); box-shadow:0 0 0 15px rgba(110,200,120,0.4); } #click-custom-5fc08cb8d9629.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px #6ec878; -moz-box-shadow:0 0 0 3px #6ec878; box-shadow:0 0 0 3px #6ec878; }
02

Step 2

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#click-custom-5fc08cb8d9a22.process-box:hover .front { background-color: #e6553c; -webkit-box-shadow:0 0 0 15px rgba(230,85,60,0.4); -moz-box-shadow:0 0 0 15px rgba(230,85,60,0.4); box-shadow:0 0 0 15px rgba(230,85,60,0.4); } #click-custom-5fc08cb8d9a22.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px #e6553c; -moz-box-shadow:0 0 0 3px #e6553c; box-shadow:0 0 0 3px #e6553c; }
03

Step 3

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

>#click-custom-5fc08cb8d9dfb.process-box:hover .front { background-color: #cd2832; -webkit-box-shadow:0 0 0 15px rgba(205,40,50,0.4); -moz-box-shadow:0 0 0 15px rgba(205,40,50,0.4); box-shadow:0 0 0 15px rgba(205,40,50,0.4); } #click-custom-5fc08cb8d9dfb.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px #cd2832; -moz-box-shadow:0 0 0 3px #cd2832; box-shadow:0 0 0 3px #cd2832; }
04

Step 4

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Process diagram


large icons
> #click-custom-5fc08cb8dab17.process-box .front { background-color: #6ec878; } #click-custom-5fc08cb8dab17.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #6ec878; -moz-box-shadow:0 0 0 1px #6ec878; box-shadow:0 0 0 1px #6ec878; }#click-custom-5fc08cb8dab17.process-box:hover .front { background-color: #19b9c8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.4); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.4); box-shadow:0 0 0 15px rgba(25,185,200,0.4); } #click-custom-5fc08cb8dab17.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px #19b9c8; -moz-box-shadow:0 0 0 3px #19b9c8; box-shadow:0 0 0 3px #19b9c8; }

PSD Project

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Read more
> #click-custom-5fc08cb8dafb4.process-box .front { background-color: #6ec878; } #click-custom-5fc08cb8dafb4.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #6ec878; -moz-box-shadow:0 0 0 1px #6ec878; box-shadow:0 0 0 1px #6ec878; }#click-custom-5fc08cb8dafb4.process-box:hover .front { background-color: #19b9c8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.4); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.4); box-shadow:0 0 0 15px rgba(25,185,200,0.4); } #click-custom-5fc08cb8dafb4.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px #19b9c8; -moz-box-shadow:0 0 0 3px #19b9c8; box-shadow:0 0 0 3px #19b9c8; }

HTML Template

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Read more
> #click-custom-5fc08cb8db5ad.process-box .front { background-color: #6ec878; } #click-custom-5fc08cb8db5ad.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #6ec878; -moz-box-shadow:0 0 0 1px #6ec878; box-shadow:0 0 0 1px #6ec878; }#click-custom-5fc08cb8db5ad.process-box:hover .front { background-color: #19b9c8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.4); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.4); box-shadow:0 0 0 15px rgba(25,185,200,0.4); } #click-custom-5fc08cb8db5ad.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px #19b9c8; -moz-box-shadow:0 0 0 3px #19b9c8; box-shadow:0 0 0 3px #19b9c8; }

WordPress Theme

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Read more

Process diagram


large icons multicolored, animated with read more link
> #click-custom-5fc08cb8dc6d6.process-box .front { background-color: #b2babc; } #click-custom-5fc08cb8dc6d6.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #b2babc; -moz-box-shadow:0 0 0 1px #b2babc; box-shadow:0 0 0 1px #b2babc; }#click-custom-5fc08cb8dc6d6.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8dc6d6.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }

PSD Project

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Read more
> #click-custom-5fc08cb8dcac0.process-box .front { background-color: #b2babc; } #click-custom-5fc08cb8dcac0.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #b2babc; -moz-box-shadow:0 0 0 1px #b2babc; box-shadow:0 0 0 1px #b2babc; }#click-custom-5fc08cb8dcac0.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8dcac0.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }

HTML Template

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Read more
> #click-custom-5fc08cb8dce4c.process-box .front { background-color: #b2babc; } #click-custom-5fc08cb8dce4c.process-box .symbol-container { -webkit-box-shadow:0 0 0 1px #b2babc; -moz-box-shadow:0 0 0 1px #b2babc; box-shadow:0 0 0 1px #b2babc; }#click-custom-5fc08cb8dce4c.process-box:hover .front { background-color: rgba(182, 85, 49, 1); -webkit-box-shadow:0 0 0 15px rgba(,,,0.5); -moz-box-shadow:0 0 0 15px rgba(,,,0.5); box-shadow:0 0 0 15px rgba(,,,0.5); } #click-custom-5fc08cb8dce4c.process-box:hover .symbol-container { -webkit-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); -moz-box-shadow:0 0 0 3px rgba(182, 85, 49, 1); box-shadow:0 0 0 3px rgba(182, 85, 49, 1); }

WordPress Theme

Massa turpis ornare nec commodo non, auctor vel felis. Etiam pharetra, turpis nec sollicitudin cursus vestibulum varius hendrerit turpis quiseam

Read more