#baguette { display: inline-block; position: relative; cursor: pointer; font-size: 32px; margin: 5px; height: 40px; width: 40px; pointer-events: auto; } #shaft, #star1, #star2, #star3, #star4 { position: absolute; width: 100%; height: 5px; background-color: #fff; margin: 5px 0; transition: 0.3s; } #shaft { margin: 0; top: 50%; transform: translateY(-50%); } #star1, #star2 { width: 20px; top: 0; } #star3, #star4 { width: 20px; bottom: 0; } #star1, #star3 { left: 0; } #star2, #star4 { right: 0; } /* Mouse hovers the baguette */ .change-hover #shaft { background-color: #e9b82f; transform: translateY(1px) rotate(-45deg); height:5px; } .change-hover #star1, .change-hover #star2, .change-hover #star3, .change-hover #star4 { width: 5px; border-radius: 100%; } .change-hover #star1 { background-color: #ff5f5f; transform: translate(19px,-2px); } .change-hover #star2 { background-color: #7ffd78; transform: translate(-3px, -6px); } .change-hover #star3 { background-color: #fafd78; transform: translate(36px, -10px); } .change-hover #star4 { background-color: #60bdff; transform: translate(5px, -22px); } /* Mouse clics the baguette */ .change-clic #shaft { transform: translateY(-50%) rotate(-135deg); background-color: #b0120b; } .change-clic #star1, .change-clic #star2, .change-clic #star3, .change-clic #star4 { left: 0; width: 100%; border-radius: 0; margin: 0; top: 50%; transform: translateY(-50%) rotate(-45deg); background-color: #b0120b; }