私のCSSクラスのテキストを選択

Question

私はそれを上に置くと、私は私のアニメーションのウェブサイト内のボタンがあります。 ボタンの上に人が乗ったときに、右から左にスキューします。 ボタン内のテキストは、私が望まないボタンで歪んでいます。 ボタンをホバーしている間に、テキストが歪んでいなくても正常に保たれるようにしたい。 私はjavascriptを試しましたが、成功しませんでした。 私のコードは、これまで：

.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>