more-energy
better-sleep
exercise-more
mediate-more
More-focus

I’m your icon with a border

 

mediate-more
mediate-more
mediate-more
.icon-container {
margin: 12px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.15);
-webkit-transition:.2s;
transition: all .2s;
-o-transition: all .2s;
-moz-transition: all 0.2s;
float: left;
width: 100px;
height: 100px;
background: rgba(203,96,179,1);
background: -moz-linear-gradient(top, rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,96,179,1)), color-stop(50%, rgba(193,70,161,1)), color-stop(51%, rgba(168,0,119,1)), color-stop(100%, rgba(219,54,164,1)));
background: -webkit-linear-gradient(top, rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%);
background: -o-linear-gradient(top, rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%);
background: -ms-linear-gradient(top, rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%);
background: linear-gradient(to bottom, rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4', GradientType=0 );
border-radius: 50%;
padding: 4px;
}
.icon-container img {
border: solid 3px #fff;
border-radius: 50%;
}

.icon-container:hover {
width: 107px;
height: 107px;
cursor: pointer;
}

#pinky-gradient{
background: rgb(237,158,89);
background: -moz-linear-gradient(-45deg, rgba(237,158,89,1) 0%, rgba(203,66,113,1) 50%, rgba(183,61,140,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(237,158,89,1) 0%,rgba(203,66,113,1) 50%,rgba(183,61,140,1) 100%);
background: linear-gradient(135deg, rgba(237,158,89,1) 0%,rgba(203,66,113,1) 50%,rgba(183,61,140,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9e59', endColorstr='#b73d8c',GradientType=1 );

}
#blue-gradient{
background: rgb(206,219,233);
background: -moz-linear-gradient(top, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%);
background: -webkit-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%);
background: linear-gradient(to bottom, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=0 );}