生成按钮链接-Javascript

我有这个代码嵌入在我的网站上，允许在网站上预约，这会在网站上打开一个弹出窗口，就像你在酒店预订网站上期望的那样

<script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe/setmore_iframe.js"></script><a id="Setmore_button_iframe" style="float:none" href="https://my.setmore.com/bookingpage/c6461561-7478-43ef-97ee-d4e8d6c89436"><img border="none" src="https://my.setmore.com/images/bookappt/SetMore-book-button.png" alt="Book an appointment with HouseKeep using SetMore" /></a>

这使用了一个非常无聊的按钮，所以我在photoshop中制作了一个自定义按钮来替换它。然而，我想在CSS中创建一个，这样当用户将鼠标悬停在它上面时，它就会改变

<Center>
<button class="button button1">BOOK NOW</button>
</Center>

<style>
.button {
background-color: #2f896b; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}

.button1 {
background-color: white;
color: black;
border: 2px solid #2f896b;
}

.button1:hover {
background-color: #2f896b;
color: white;
</style>

现在预订
.按钮{
背景色：#2f896b；/*绿色*/
边界：无；
颜色：白色；
填充：16px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
}
.按钮1{
背景色：白色；
颜色：黑色；
边框：2px实心#2f896b；
}
.按钮1：悬停{
背景色：#2f896b；
颜色：白色；

---

我想这样做，以便我可以使用我制作的按钮，但它仍然具有与原始代码中的图像完全相同的功能。有什么想法吗？

您是否尝试将按钮的背景设置为您制作的背景？请检查以下内容：

background: url("../images/button.png") no-repeat;

---

通过在CSS下面添加此选项，您可以轻松覆盖Setmore按钮。 下面的CSS将帮助您进行以下更改

设置更多按钮的文本

添加悬停效果

更改按钮样式

a#Setmore_button_iframe
{
   position: relative;
}
a#Setmore_button_iframe > img {
   display: none;
}
a#Setmore_button_iframe:after 
{
    content:"Book  Free Appointment"; /* TEXT YOU WANT */
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
   -webkit-transition-duration: 0.4s; 
   transition-duration: 0.4s;
   cursor: pointer;
   background-color: white;
   color: black;
   border: 2px solid #27C3BB;
   font-family: sans-serif;
}
a#Setmore_button_iframe:hover:after {
  background-color: #27C3BB;
  color: white;
}

---

对于演示，请检查此链接

我不知道脚本如何工作，但也许您可以用文本替换

标记，并将

class=“button button1”

添加到

标记中。请在此处澄清您的请求…：“我想这样做，以便我可以使用我制作的按钮，但它仍然具有与原始代码中的图像完全相同的功能，以便进行代码嵌入。”