A CodePen by Joe Taylor. CSS3 Add New Icon - Combined some simple CSS3 rules to create an "add new" icon with a fun little mouseover transition.

index.haml

%span.add-new

style.less

body {
  margin: 30px;
}

 .add-new {
  position: relative;
  background-color: #84eb7c;
  display: inline-block;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: solid rgba(255, 255, 255, 0.9) 5px;
  box-shadow: 0 0 10px rgba(90, 200, 90, 0.5);
  cursor: pointer;
  user-select: none;
  transform: translate3d(0, 0, 0);
  transition: all 0.5s;
}

.add-new::before,
.add-new::after {
  content: "";
  display: block;
  width: 20px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 5px; top: 12px;
}

.add-new::after {
  transform: rotateZ(90deg);
}

.add-new:hover {
  transform: scale3d(1.1, 1.1, 1);
  background-color: limegreen;
  box-shadow: 0 0 1px limegreen;  
  border-color: white;
}