HTML 形状未在 Web 浏览器上正确显示，但链接有效答案

【问题标题】：HTML Shape not showing up correctly on the web browser, but link worksHTML 形状未在 Web 浏览器上正确显示，但链接有效
【发布时间】：2020-03-06 02:52:36
【问题描述】：

我有一个带有链接的动画彩色形状，它没有正确显示在网络浏览器中。当我在 w3schools.com 或网页设计器上运行它时，它看起来很完美。但是，当它实际被推出时，它会显示链接，但不会显示形状、动画或颜色。这是我正在使用的代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
border-radius: 500px;
background-color: #00c2a2;
border: none;
color: #0f1211;
text-align: center;
font-size: 25px;
padding: 2px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -30px;
transition: 0.5s;
}
.button:hover span {
padding-right: 30px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2></h2>
<button class="button"><span><script src="https://js.churchcenter.com/modal/v1"></script>
<a href="https://tlcworshipcenter.churchcenter.com/giving" data-open-in-church-center-modal="true">Partner With Us!</a> </span></button>
</body>
</html>

【问题讨论】：

您可能必须先清除缓存，然后才能识别您所做的更改。当您提到它适用于 w3schools/etc 时，它是什么样的？它看起来像什么真实的？可能会帮助人们回答并提高您的问题接受率。

标签： html css css-animations

【解决方案1】：

试试这个

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
border-radius: 500px;
background-color: #00c2a2;
border: none;
color: #0f1211;
text-align: center;
font-size: 20px;

padding: 10px;
width: 250px;
transition: all 0.5s;
cursor: pointer;

}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;



}
.button span:after {
content: '\00bb';

position: absolute;
opacity: 0;
top: 0;
right: -30px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;

}
.button:hover span:after {
opacity: 1;
right: 0;
}

.button span a{

text-decoration: none;
font-weight: 700;

}


</style>
</head>
<body>
<h2></h2>
<button class="button"><span><script src="https://js.churchcenter.com/modal/v1"></script>
<a class="text" href="https://tlcworshipcenter.churchcenter.com/giving" data-open-in-church-center-modal="true">Partner With Us!</a> </span></button>
</body>
</html>

【讨论】：