Hallo zusammen,
ich bin neu hier im Forum und was Webentwicklung angeht eher ein Noob. Dementsprechend hab ich meine Webanwendung auch von einem Freelancer erstellen gelassen. Nun bin ich gerade dabei einige Änderungen vorzunehmen und stoße an einem blöden Button an meine Grenze.
Die Buttons sind in PHP so eingebunden:
Code
foreach ( $products as $product ) {
?>
<div class="epct_product_wrapper">
<div class="epct_product_content">
<div>
<h5 class="epct_product_name"><?= $product->name; ?></h5>
<img class="epct_product_img" src="<?= $product->img; ?>">
</div>
<div>
<a href="<?= $product->link; ?>" target="_blank"
class="epct_button epct_product_buy_link"><?= __( 'Buy Now', 'epct' ) ?></a>
<a href="#" data-product_id="<?= $product->id; ?>"
class="epct_product_compare_button epct_button"><?= __( 'Add to comparison', 'epct' ) ?></a>
<span class="epct_product_price"><?= $product->price; ?>€</span>
</div>
</div>Den "epct_product_compare_button epct_button" möchte ich farblich anders darstellen. Ich hätte vermutet, dass sich das in CSS so oder so ähnlich umsetzen lässt, leider haben beide Buttons nach wie vor die selbe Farbe.
CSS
.epct_button {
transition: background 150ms ease-in-out;
background: #4AC6D6;
border: none;
border-radius: 5px;
box-sizing: border-box;
color: #fff !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.88889em;
font-weight: 700;
line-height: 1.2;
outline: none;
padding: 0.76rem 1rem;
text-decoration: none !important;
vertical-align: bottom;
}
.epct_button > epct_product_compare_button {
background: #FDD247 ;
}Ich bin für jede Hilfe dankbar.
Viele Grüße
TwoBeers
