如何使用 CSS 设置添加到购物车 <button> 的样式？

Question

JSfiddle上面我需要的例子。

大家好，我在寻找解决这个小问题的方法时遇到了一些问题。我有一个添加到购物车按钮，我希望它的样式与我正在使用的网站上的许多其他按钮相似。我希望效果起作用，当然要删除添加 <button> 后自动具有的基本视觉效果。有一些类似的主题，但我无法根据他们的建议找到解决方案。

.main_btn_m {
  float: right;
  display: block;
  text-decoration: none;
  background: #2f5289;
  color: #eeeeee;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding: 8px 40px;
  font-family: Arial, Helvetica, sans-serif;
  transition: .7s;
  letter-spacing: 1px;
}
.main_btn_m span {
  float: left;
}
.main_btn_m:hover {
  background: #2c3339;
  color: #ffffff;
  transition: .7s;
  cursor: pointer;
}
.hvr-underline-from-left_m {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left_m:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #FEC55A;
  height: 3px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left_m:hover:before,
.hvr-underline-from-left_m:focus:before,
.hvr-underline-from-left_m:active:before {
  right: 0;
}

 <a class="main_btn_m hvr-underline-from-left_m" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" style="width: 250px; float: left; margin-bottom: 50px;">basic btn that works </a> 

<!-- bottom btn is what I am trying to accomplish, an add to cart btn that works with the right styling -->
<button onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" style="">
  <a class="main_btn_m hvr-underline-from-left_m" style="width: 250px; float: left;">add to cart 
        <!-- need to get rid of styling while keeping the same style as 'basic btn that works' --></a>
</button>

<!-- original working code 
        <button class="form-button btn-pro addcart_view" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()"> 
        </button>  -------------------------------------------->

Answer 1

问题是 添加到购物车 link 包裹在 button 元素中。只需将此按钮样式添加到您的 CSS 即可。

button {
    background: transparent;
    border: none;
    padding: 0px;
}

显然，您可能需要更具体的选择器，具体取决于您的整体 CSS。

值得一提的是，@Quentin 表示这不是有效的 HTML5 结构。如 Mozilla Docs

中所述

允许的内容 Phrasing content定义为：

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.

Answer 2

不，不是将 class 属性应用于按钮内的 link，而是将其应用于按钮本身

<a class="main_btn_m hvr-underline-from-left_m" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" 
style="width: 250px; float: left; margin-bottom: 50px;">basic btn that works

</a>

<!-- bottom btn is what I am trying to accomplish, an add to cart btn that works with the right styling -->
<button onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" class="main_btn_m hvr-underline-from-left_m" style="width: 250px; float: left;">
<a>add to cart                      <!-- need to get rid of styling while keeping the same style as 'basic btn that works' -->              
</a>

</button>


<!-- original working code 
<button class="form-button btn-pro addcart_view" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()"> 
</button>   
-------------------------------------------->

<style>

.main_btn_m {
    float          : right;
    display        : block;
    text-decoration: none;
    background     : #2f5289;
    color: #eeeeee;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 8px 40px;
    font-family: Arial, Helvetica, sans-serif;
    transition: .7s;
    letter-spacing: 1px;
}

.main_btn_m span {
    float: left; 
}

.main_btn_m:hover {
    background: #2c3339;
    color: #ffffff;
    transition: .7s;
    cursor: pointer;
}

.hvr-underline-from-left_m {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.hvr-underline-from-left_m:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #FEC55A;
  height: 3px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-underline-from-left_m:hover:before, .hvr-underline-from-left_m:focus:before, .hvr-underline-from-left_m:active:before {
  right: 0;
}
</style>

试试我在此处修复的代码

Answer 3

<a class="main_btn_m hvr-underline-from-left_m" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" 
style="width: 250px; float: left; margin-bottom: 50px;">basic btn that works

</a>

<!-- bottom btn is what I am trying to accomplish, an add to cart btn that works with the right styling -->
<button onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()" class="main_btn_m hvr-underline-from-left_m" style="width: 250px; float: left;">
<a>add to cart                      <!-- need to get rid of styling while keeping the same style as 'basic btn that works' -->              
</a>

</button>


<!-- original working code 
<button class="form-button btn-pro addcart_view" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()"> 
</button>   
-------------------------------------------->

<style>

.main_btn_m {
    float          : right;
    display        : block;
    text-decoration: none;
    background     : #2f5289;
    color: #eeeeee;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 8px 40px;
    font-family: Arial, Helvetica, sans-serif;
    transition: .7s;
    letter-spacing: 1px;
}

.main_btn_m span {
    float: left; 
}

.main_btn_m:hover {
    background: #2c3339;
    color: #ffffff;
    transition: .7s;
    cursor: pointer;
}

.hvr-underline-from-left_m {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.hvr-underline-from-left_m:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #FEC55A;
  height: 3px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-underline-from-left_m:hover:before, .hvr-underline-from-left_m:focus:before, .hvr-underline-from-left_m:active:before {
  right: 0;
}
</style>

如何使用 CSS 设置添加到购物车 <button> 的样式？

How to style an add to cart <button> with CSS?

html

css

button

styling