Process diagram
small, letters
>
#click-custom-676dad560f8bc.process-box .front {
background-color: #e1e3e5;
}
#click-custom-676dad560f8bc.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-676dad560f8bc.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-676dad560f8bc.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-676dad560fb57.process-box .front {
background-color: #e1e3e5;
}
#click-custom-676dad560fb57.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-676dad560fb57.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-676dad560fb57.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-676dad560ffcf.process-box .front {
background-color: #e1e3e5;
}
#click-custom-676dad560ffcf.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-676dad560ffcf.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-676dad560ffcf.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-676dad5610f81.process-box .front {
background-color: #e1e3e5;
}
#click-custom-676dad5610f81.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-676dad5610f81.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-676dad5610f81.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-676dad5611fc5.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-676dad5611fc5.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-676dad5612411.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-676dad5612411.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-676dad56126e4.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-676dad56126e4.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-676dad5612a2b.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-676dad5612a2b.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-676dad5613240.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-676dad5613240.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-676dad56135a4.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-676dad56135a4.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-676dad56137a6.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-676dad56137a6.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-676dad56139c6.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-676dad56139c6.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-676dad5614760.process-box .front {
background-color: #6ec878;
}
#click-custom-676dad5614760.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-676dad5614760.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-676dad5614760.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-676dad5614a78.process-box .front {
background-color: #6ec878;
}
#click-custom-676dad5614a78.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-676dad5614a78.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-676dad5614a78.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-676dad5614d7b.process-box .front {
background-color: #6ec878;
}
#click-custom-676dad5614d7b.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-676dad5614d7b.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-676dad5614d7b.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 moreProcess diagram
large icons multicolored, animated with read more link
>
#click-custom-676dad5615663.process-box .front {
background-color: #b2babc;
}
#click-custom-676dad5615663.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-676dad5615663.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-676dad5615663.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-676dad56159d5.process-box .front {
background-color: #b2babc;
}
#click-custom-676dad56159d5.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-676dad56159d5.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-676dad56159d5.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-676dad5615c14.process-box .front {
background-color: #b2babc;
}
#click-custom-676dad5615c14.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-676dad5615c14.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-676dad5615c14.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