选择我的css类

时间：2017-10-01 10:17:12

标签： css button text hover skew

我的网站上有一个按钮，当我将鼠标悬停在其上时，我将其设为动画。 当一个人盘旋在按钮上时，我从右向左倾斜按钮。 按钮内的文字与我不想要的按钮倾斜。 当我悬停按钮时，我希望文本保持正常，没有任何偏斜。 我试过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>

2 个答案:

答案 0 :(得分：0)

像这样转换你的CSS（你需要在相同的速度的情况下向另一个方向倾斜，就好像它似乎没有移动一样）：

＆＃13;
＆＃13; 
C:\Program Files (x86)\Microsoft Visual C++ Build Tools>pip install pyaudio
Collecting pyaudio
  Using cached PyAudio-0.2.11.tar.gz
Installing collected packages: pyaudio
  Running setup.py install for pyaudio ... error
    Complete output from command c:\python27\python.exe -u -c "import setuptools, tokenize;__file__='C:\\Users\\cybercry\\AppData\\Local\\Temp\\pip-build-tder68r3\\pyaudio\\setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" install --record C:\Users\cybercry\AppData\Local\Temp\pip-0p059g11-record\install-record.txt --single-version-externally-managed --compile:
    running install
    running build
    running build_py
    creating build
    creating build\lib.win-amd64-3.7
    copying src\pyaudio.py -> build\lib.win-amd64-3.7
    running build_ext
    building '_portaudio' extension
    creating build\temp.win-amd64-3.7
    creating build\temp.win-amd64-3.7\Release
    creating build\temp.win-amd64-3.7\Release\src
    C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\BIN\x86_amd64\cl.exe /c /nologo /Ox /W3 /GL /DNDEBUG /MD -DMS_WIN64=1 -Ic:\python27\include -Ic:\python27\include "-IC:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\INCLUDE" "-IC:\Program Files (x86)\Windows Kits\10\include\10.0.10240.0\ucrt" "-IC:\Program Files (x86)\Windows Kits\8.1\include\shared" "-IC:\Program Files (x86)\Windows Kits\8.1\include\um" "-IC:\Program Files (x86)\Windows Kits\8.1\include\winrt" "-IC:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\INCLUDE" "-IC:\Program Files (x86)\Windows Kits\10\include\10.0.10240.0\ucrt" "-IC:\Program Files (x86)\Windows Kits\8.1\include\shared" "-IC:\Program Files (x86)\Windows Kits\8.1\include\um" "-IC:\Program Files (x86)\Windows Kits\8.1\include\winrt" /Tcsrc/_portaudiomodule.c /Fobuild\temp.win-amd64-3.7\Release\src/_portaudiomodule.obj
    _portaudiomodule.c
    c:\python27\include\pyconfig.h(117): warning C4005: 'MS_WIN64': macro redefinition
    c:\python27\include\pyconfig.h(117): note: command-line arguments:  see previous definition of 'MS_WIN64'
    src/_portaudiomodule.c(29): fatal error C1083: Cannot open include file: 'portaudio.h': No such file or directory
    error: command 'C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\VC\\BIN\\x86_amd64\\cl.exe' failed with exit status 2

    ----------------------------------------
Command "c:\python27\python.exe -u -c "import setuptools, tokenize;__file__='C:\\Users\\cybercry\\AppData\\Local\\Temp\\pip-build-tder68r3\\pyaudio\\setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" install --record C:\Users\cybercry\AppData\Local\Temp\pip-0p059g11-record\install-record.txt --single-version-externally-managed --compile" failed with error code 1 in C:\Users\cybercry\AppData\Local\Temp\pip-build-tder68r3\pyaudio\
＆＃13; 
.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);
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

请试试这个。我添加了这个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;	
  -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>

相关问题
最新问题