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()"> \t 
 
     </button> \t -------------------------------------------->

Answer 1

ない代わりに、ボタンの内部リンクにclass属性を適用するOOF、ボタン自体

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

問題がカートに追加リンクはbutton要素でラップされていることです。このボタンスタイルをCSSに追加するだけで、効果があります。

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

明らかに、全体的なCSSに応じて、より具体的なセレクタが必要な場合があります。

これは@Quentinが有効なHTML5構造ではないと述べる価値があります。

フレージングコンテンツは、テキストとそれに含まれるマークアップを定義：Mozilla Docs

許可コンテンツに記載されているとおりPhrasing contentとして定義されます。 のフレーズ内容の実行は段落を構成します。

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>