내 CSS 클래스에있는 텍스트를 선택하십시오.

Question

내 웹 사이트에 마우스를 올려 놓으면 움직이는 버튼이 있습니다. 단추 위로 마우스를 가져 가면 단추가 오른쪽에서 왼쪽으로 기울어집니다. 단추 안의 텍스트가 내가 원하지 않는 단추로 비뚤어집니다. 단추를 가리키면 텍스트가 기울어지지 않고 정상적으로 유지되기를 원합니다. 자바 스크립트를 시도했지만 성공하지 못했습니다. 지금까지 내 코드 :

.btnredskewed 
 
{ 
 
    font-family: 'cabinbold'; 
 
\t border: #f94f4f solid 3px; 
 
\t border-radius: 6px; 
 
\t background-color: #f94f4f; 
 
\t color: #ffffff; 
 
\t font-size: 15px; 
 
\t padding-top: 8px; 
 
\t padding-bottom: 8px; 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
\t cursor: pointer; 
 
\t text-transform: uppercase; 
 
    transition: 0.2s; 
 
\t 
 
\t -ms-transform: skewX(-20deg); /* IE 9 */ 
 
    -webkit-transform: skewX(-20deg); /* Safari */ 
 
    transform: skewX(-20deg); 
 
} 
 

 
.btnredskewed:hover 
 
{ 
 
    font-family: 'cabinbold'; 
 
\t border: #9cbce4 solid 3px; 
 
\t border-radius: 6px; 
 
\t background-color: #9cbce4; 
 
\t color: #ffffff; 
 
\t font-size: 15px; 
 
\t padding-top: 8px; 
 
\t padding-bottom: 8px; 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
\t cursor: pointer; 
 
\t text-transform: uppercase; 
 
\t \t 
 
\t -ms-transform: skewX(20deg); /* IE 9 */ 
 
    -webkit-transform: skewX(20deg); /* Safari */ 
 
    transform: skewX(20deg); 
 
} 
 

 
.unskewtext 
 
{ 
 
\t -ms-transform: skewX(20deg); /* IE 9 */ 
 
\t -webkit-transform: skewX(20deg); /* Safari */ 
 
\t transform: skewX(20deg); 
 
} 
 

 
.unskewtext:hover 
 
{ 
 
\t -ms-transform: skewX(-20deg); /* IE 9 */ 
 
\t -webkit-transform: skewX(-20deg); /* Safari */ 
 
\t transform: skewX(-20deg); 
 
}

<a href="#mogelijkheden"><button type="button" class="btnredskewed margintopsmall"><div class="unskewtext">bekijk de mogelijkheden</div></button></a>

Answer 1

이 (가 움직이지 않는 것 같다 그런 당신이 와 같은 속도을 다른 방향으로 왜곡을해야)이처럼 CSS를 변환 :

.btnredskewed { 
 
    font-family: 'cabinbold'; 
 
    border: #f94f4f solid 3px; 
 
    border-radius: 6px; 
 
    background-color: #f94f4f; 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    transition: 0.2s; 
 
    -ms-transform: skewX(-20deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: skewX(-20deg); 
 
    /* Safari */ 
 
    transform: skewX(-20deg); 
 
} 
 

 
.btnredskewed:hover { 
 
    font-family: 'cabinbold'; 
 
    border: #9cbce4 solid 3px; 
 
    border-radius: 6px; 
 
    background-color: #9cbce4; 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    -ms-transform: skewX(20deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: skewX(20deg); 
 
    /* Safari */ 
 
    transform: skewX(20deg); 
 
} 
 

 
.unskewtext { 
 
    -ms-transform: skewX(20deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: skewX(20deg); 
 
    /* Safari */ 
 
    transform: skewX(20deg); 
 
    transition: 0.2s; 
 
} 
 

 
.btnredskewed:hover .unskewtext { 
 
    -ms-transform: skewX(-20deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: skewX(-20deg); 
 
    /* Safari */ 
 
    transform: skewX(-20deg); 
 
}

<a href="#mogelijkheden"><button type="button" class="btnredskewed margintopsmall"><div class="unskewtext">bekijk de mogelijkheden</div></button></a>

Answer 2

시도해보십시오. 나는이 CSS를 추가했다. 텍스트가 정상적으로 유지되면 호버에 transform 효과를주고 일반 텍스트 등급으로 transition을 부여하십시오 .unskewtext.

.btnredskewed:hover .unskewtext { 
    -ms-transform: skewX(-20deg); 
    -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
} 
.unskewtext 
{ 
-webkit-transition: 0.2s; 
transition: 0.2s; 
} 

.btnredskewed 
 
{ 
 
    font-family: 'cabinbold'; 
 
    border: #f94f4f solid 3px; 
 
    border-radius: 6px; 
 
    background-color: #f94f4f; 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    transition: 0.2s; \t 
 
    -ms-transform: skewX(-20deg); /* IE 9 */ 
 
    -webkit-transform: skewX(-20deg); /* Safari */ 
 
    transform: skewX(-20deg); 
 
} 
 

 
.btnredskewed:hover 
 
{ 
 
    font-family: 'cabinbold'; 
 
    border: #9cbce4 solid 3px; 
 
    border-radius: 6px; 
 
    background-color: #9cbce4; 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    cursor: pointer; 
 
    text-transform: uppercase; \t \t 
 
    -ms-transform: skewX(20deg); /* IE 9 */ 
 
    -webkit-transform: skewX(20deg); /* Safari */ 
 
    transform: skewX(20deg); 
 
} 
 

 
.unskewtext 
 
{ 
 
    -ms-transform: skewX(20deg); /* IE 9 */ 
 
    -webkit-transform: skewX(20deg); /* Safari */ 
 
    transform: skewX(20deg); 
 
    -webkit-transition: 0.2s; \t 
 
    transition: 0.2s; \t 
 
} 
 

 
.unskewtext:hover 
 
{ 
 
    -ms-transform: skewX(-20deg); /* IE 9 */ 
 
    -webkit-transform: skewX(-20deg); /* Safari */ 
 
    transform: skewX(-20deg); 
 
} 
 
.btnredskewed:hover .unskewtext { 
 
    -ms-transform: skewX(-20deg); 
 
    -webkit-transform: skewX(-20deg); 
 
    transform: skewX(-20deg); 
 
}

<a href="#mogelijkheden"><button type="button" class="btnredskewed margintopsmall"><div class="unskewtext">bekijk de mogelijkheden</div></button></a>