Question

我在网站上有一个链接，上面写着＆＃34;使用当前位置＆＃34;。我想将该链接更改为按钮形状。按钮的ID是btnGeolocation

您可以在此页https://order.subway.com/Stores/Find.aspx?pid=1#pg1

中查看该链接

Answer 1

Html for button

<a href="#" class="page-button visual-button link">button</a>

和css

.link{
  text-decoration:none
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-weight: normal;
}
.link:hover{
  text-decoration:none;
  padding: 10px 25px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: none;
  outline: none;
  position: relative;
  text-align: center;
  text-decoration: none;
  color: #fff; }

.link:hover {
  box-shadow: 0 4px 0 0 #f9b980, 0 2px 0 0px #f9b980;
  background-color: #fc983f; }
  .visual-button:active {
    top: 5px;
    box-shadow: 0 0px 0 0px #f9b980, 0 0px 0px 0px #f9b980; }

Answer 2

此处不需要jquery。使用CSS边框和背景属性，您将获得结果。

Answer 3

你只能使用CSS来做到这一点，看看这个链接： https://www.freshdesignweb.com/css3-buttons/

我希望这可以帮到你

Answer 4

将其添加到样式表中！它应该工作...编辑CSS以获得你想要的形状！

#divSearchLocation #btnGeolocation{
border: 1px solid #b5b5b5;
border-radius: 100px;
padding: 8px;
background: #e1e1e1;
box-shadow: inset 0px -18px 25px -18px black;}

需要使用jquery

4 个答案: