Select 我的文字 css class

Question

我的网站上有一个按钮，当我将鼠标悬停在该按钮上时，它会显示动画。当有人将鼠标悬停在按钮上时，我将按钮从右向左倾斜。按钮内的文字与我不想要的按钮倾斜。当我悬停按钮时，我希望文本保持正常而没有任何倾斜。我尝试了 javascript 但没有成功。到目前为止我的代码：

.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);
}

.unskewtext:hover
{
 -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 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 class .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; 
  -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);
  -webkit-transition: 0.2s; 
  transition: 0.2s; 
}

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

Select 我的文字 css class

Select the text in my css class

css

text

button

hover

skew