制作按钮链接- Javascript

Make button link - Javascript

本文关键字：Javascript 链接 按钮      更新时间：2023-09-26

我有这个代码嵌入我的网站从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>

我想让它，这样我就可以使用我所做的按钮，但它仍然具有完全相同的功能作为图像存在于原始代码代码嵌入。什么好主意吗?

通过在CSS下面添加这个，你可以很容易地覆盖Setmore按钮。下面的CSS将帮助您进行以下更改

  1. Setmore按钮文字
  2. 添加悬停效果

  3. 更改按钮样式

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

For Demo查看此链接Setmore自定义按钮

您是否尝试过将按钮的背景设置为您制作的背景?请在下面检查:

background: url("../images/button.png") no-repeat;
相关文章：