Process

Process diagram


small, letters
> #click-custom-5f695bd74f660.process-box .front { background-color: #e1e3e5; } #click-custom-5f695bd74f660.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-5f695bd74f660.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd74f660.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; }
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-5f695bd751cd4.process-box .front { background-color: #e1e3e5; } #click-custom-5f695bd751cd4.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-5f695bd751cd4.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd751cd4.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; }
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-5f695bd7526f1.process-box .front { background-color: #e1e3e5; } #click-custom-5f695bd7526f1.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-5f695bd7526f1.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd7526f1.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; }
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-5f695bd75412a.process-box .front { background-color: #e1e3e5; } #click-custom-5f695bd75412a.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-5f695bd75412a.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd75412a.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; }
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-5f695bd75eff4.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd75eff4.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-5f695bd760d08.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd760d08.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; }
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-5f695bd76162b.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd76162b.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; }
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-5f695bd7635a0.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd7635a0.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; }
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-5f695bd76d9ff.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-5f695bd76d9ff.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-5f695bd7709d0.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-5f695bd7709d0.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-5f695bd771c47.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-5f695bd771c47.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-5f695bd77440b.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-5f695bd77440b.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-5f695bd77a14e.process-box .front { background-color: #6ec878; } #click-custom-5f695bd77a14e.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-5f695bd77a14e.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-5f695bd77a14e.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-5f695bd77f788.process-box .front { background-color: #6ec878; } #click-custom-5f695bd77f788.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-5f695bd77f788.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-5f695bd77f788.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-5f695bd782106.process-box .front { background-color: #6ec878; } #click-custom-5f695bd782106.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-5f695bd782106.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-5f695bd782106.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-5f695bd78e510.process-box .front { background-color: #b2babc; } #click-custom-5f695bd78e510.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-5f695bd78e510.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd78e510.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-5f695bd78f8de.process-box .front { background-color: #b2babc; } #click-custom-5f695bd78f8de.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-5f695bd78f8de.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd78f8de.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-5f695bd792b00.process-box .front { background-color: #b2babc; } #click-custom-5f695bd792b00.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-5f695bd792b00.process-box:hover .front { background-color: #19B9C8; -webkit-box-shadow:0 0 0 15px rgba(25,185,200,0.5); -moz-box-shadow:0 0 0 15px rgba(25,185,200,0.5); box-shadow:0 0 0 15px rgba(25,185,200,0.5); } #click-custom-5f695bd792b00.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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR