CSS /*nút xem tất cả*/ .sitebox-actions .txapper { display: flex; justify-content: center; } .sitebox-actions .cta { display: flex; padding: 10px 45px; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 40px; color: white; background: #6225E6; transition: 1s; box-shadow: 6px 6px 0 black; transform: skewX(-15deg); clear: both; } .sitebox-actions .cta:focus { outline: none; } .sitebox-actions .cta:hover { transition: 0.5s; box-shadow: 10px 10px 0 #FBC638; } .sitebox-actions .cta span:nth-child(2) { transition: 0.5s; margin-right: 0px; } .sitebox-actions .cta:hover span:nth-child(2) { transition: 0.5s; margin-right: 45px; } .sitebox-actions span { transform: skewX(15deg); } .sitebox-actions span:nth-child(2) { width: 20px; margin-left: 30px; position: relative; top: 12%; } /**************SVG****************/ .sitebox-actions path.one { transition: 0.4s; transform: translateX(-60%); } .sitebox-actions path.two { transition: 0.5s; transform: translateX(-30%); } .sitebox-actions .cta:hover path.three { animation: color_anim 1s infinite 0.2s; } .sitebox-actions .cta:hover path.one { transform: translateX(0%); animation: color_anim 1s infinite 0.6s; } .sitebox-actions .cta:hover path.two { transform: translateX(0%); animation: color_anim 1s infinite 0.4s; } /* SVG animations */ @keyframes color_anim { 0% { fill: white; } 50% { fill: #FBC638; } 100% { fill: white; } } https://codepen.io/folaad/pen/YvmRpz