如何添加到購物車<button>與CSS？

JSfiddle上面我需要的例子。如何添加到購物車<button>與CSS？

嘿傢伙，我有一些問題找到解決這個小問題。我有一個添加到購物車按鈕，我正在尋找類似於我正在工作的網站上的其他許多按鈕的樣式。我希望效果起作用，當然也可以刪除添加了<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()"> \t 
 
     </button> \t -------------------------------------------->

來源

2016-10-04 julian sfw

動畫代碼在您的jsfiddle中 – 2016-10-04 12:24:35

首先修復您的HTML。你不能在按鈕中有鏈接。 https://validator.w3.org/nu/ – Quentin

沒有代替OOF應用class屬性按鈕裏面的鏈接，將其應用於按鈕本身

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

試試這個代碼，香港專業教育學院在這裏固定

來源

2016-10-04 12:34:24

謝謝Sibusiso，這個工程。我不得不爲任何人想知道添加一些CSS CSS .main_btn_m a { \t color：#eeeeee; } .main_btn_m a：hover { \t color：#ffffff; } 但你幾乎讓我到終點。謝謝一堆。 –

的問題是，加入購物車鏈接被包裹在一個button元素。只需將此按鈕樣式添加到您的CSS，它應該工作。

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

很明顯，您可能需要一個更具體的選擇器，具體取決於您的整體CSS。

值得一提的是@Quentin聲明這不是有效的HTML5結構。正如在Mozilla Docs

允許內容陳述Phrasing content其被定義爲：

措詞內容定義文本和標記了它包含。短語內容組成段落的運行。

來源

2016-10-04 12:28:36 Corporalis

我在Corporalis之前擁有正確的結構，但它沒有工作。無論是在正確的結構下，造型都沒有了，或者我固定了結構不良的造型，但實際上這個按鈕並沒有工作。我陷入了僵局，上面的代碼被用來突出我正在尋找的東西。我閱讀昆廷的文章，但不像你的文章和Sibusiso的文章，這沒有幫助，或者我不知道的東西。我嘗試了Sibusiso的答案，並且使用了很小的mods，它完美地工作。不過，我相信你的備用解決方案使用background：transparent;也將起作用。再次感謝。 –

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

來源

2016-10-04 14:31:57

如何添加到購物車<button>與CSS？

回答

相關問題