.btn_style07 { width: 100%; } .btn_style07 a { display: inline-flex; padding: 13px 0 13px; box-sizing: border-box; color: #333; font-weight: 500; position: relative; text-decoration: none; align-items: center; justify-content: center; gap: 10px 20px; flex-wrap: wrap; background-color: transparent!important; } .btn_style07 a .btn_arrow { position: relative; width: 50px; height: 50px; flex-shrink: 0; } .btn_style07 a .btn_arrow:before { content: ''; width: 100%; height: 100%; border: 1px solid var(--main-color); border-radius: 50%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease; } .btn_style07 a .btn_arrow:after { content: ''; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-mask-image: url("../img/common/btn_arrow01.svg"); mask-image: url(../img/common/btn_arrow01.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; width: 25px; height: 5px; -webkit-mask-size: 100% auto; mask-size: 100% auto; background-color: var(--main-color); } .btn_style07 a:hover .btn_arrow:before { background-color: var(--main-color); } .btn_style07 a:hover .btn_arrow:after { background-color: #fff; } @media (min-width: 810px) { .btn_style07 a:hover .btn_arrow:before { transform: translateY(-50%) scale(1.2); } }