Question

我有这个代码从Setmore嵌入我的网站以允许在网站上预约，这将在网站上打开一个弹出窗口，就像您期望在酒店预订网站上一样。

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

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

Answer 1

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

Setmore按钮的文字
添加悬停效果

更改按钮样式

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

演示请点击此链接Setmore Custom Button

Answer 2

您是否尝试过设置按钮的背景？请查看以下内容：

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

制作按钮链接 - Javascript

2 个答案: