julian sfw julian sfw - 2 months ago 6
HTML Question

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

JSfiddle Example of what I need above.

Hey guys, I'm having some issues finding a solution to this small problem. I have an add to cart button and I'm looking to style it similar to many other buttons I have on a website I'm working on. I want the effects to work and of course to remove the basic visuals that adding

<button>
will automatically have. There were some similar topics to this nature, but I was unable to find a solution based on their suggestions.

Thank you.

HTML

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


CSS

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

Answer

No instead oof applying the class attribute to the link inside the button, apply it to the button itself

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

Try this code that ive fixed here