製作按鈕鏈接 - 使用Javascript

我有這樣的代碼嵌入我的網站從Setmore允許在網站上預約，這將打開該網站的彈出像你所期望的一個酒店預訂網站。製作按鈕鏈接 - 使用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>

我想使它這樣我可以使用我所做的按鈕，但它仍然有完全相同的功能圖像中的原代碼在那裏的代碼嵌入。有任何想法嗎？

來源

2016-09-17 Isaac Antóine

我不知道腳本如何工作，但也許你可以用你的文本替換''標籤，並在你的''標籤中加入'class =「按鈕button1」'。 –

請在此澄清您的請求...：「我想使它能夠使用我製作的按鈕，但它仍然具有與原始代碼中存在的圖像完全相同的功能以供嵌入代碼「。 –

你試過按鈕的背景設置爲你做的嗎？檢查它下面：

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

來源

2016-09-17 01:01:27

加入這個下面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

來源

2016-09-21 04:26:53

製作按鈕鏈接 - 使用Javascript

回答

相關問題