CSS文件
/* 按钮样式 */
.btn {
font-size: 17px;
background: transparent;
border: none;
padding: 1em 1.5em;
color: #ffedd3;
border-radius: .5rem;
text-transform: uppercase;
position: relative;
transition: .5s ease;
}
/* 按钮前置元素 */
.btn::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background-color: #00f0ff;
transition: .5s ease;
}
/* 鼠标悬停时按钮样式 */
.btn:hover {
color: #1e1e2b;
transition-delay: .5s;
}
/* 鼠标悬停时按钮前置元素 */
.btn:hover::before {
width: 100%;
}
/* 按钮后置元素 */
.btn::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 0;
width: 100%;
background-color: #ff0000;
border-radius: .5rem;
transition: .4s ease;
z-index: -1;
}
/* 鼠标悬停时按钮后置元素 */
.btn:hover::after {
height: 100%;
transition-delay: 0.4s;
color: aliceblue;
}
HTML文件(from表单前)
html>
<html lang="zh-CN">
<head>
<link rel="stylesheet" type="text/css" href="./btn属性.css">
head>
<body>
<button id="likeBtn" class="btn" onclick="like()">
点赞
button>
body>
这样可以正常运行CSS。
HTML(from表单后)
html>
<html lang="zh-CN">
<head>
<link rel="stylesheet" type="text/css" href="./btn属性.css">
head>
<body>
<form action="http://127.0.0.1:610/" target="_blank" method="POST">
<input type="button" name="text" value="点赞" class="btn" onclick="like()">
form>
button>
body>
这下CSS就失效了。
有谁可以解决嘛？
失效是什么情况？如果是因为加了form的原因，可以在样式前面加上form的修饰，表示作用于form下面的btn