Change Add to Cart button in Luma 2 child theme on Magento 2

Question

I have Magento 2.4.1 installed with a custom theme. I have a _theme.less file (themeDir\web\css\source_theme.less), where I changed the button color to:

@button-primary__active__background: @color-black;

But the button color is still the default blue Luma color.

Answer 1

Simplest way to extend parent styles To extend the parent theme’s styles in your theme:

In your theme directory, create a web/css/source sub-directory. Create a _extend.less file there. The path to it looks like following:

<theme_dir>/
│  ├── web/
│  │   ├── css/
│  │   │   ├── source/
│  │   │       ├──_extend.less
...

Add your Less code in this file.

Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.

See: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-guide/css_quick_guide_approach.html#simple_extend

To use your custom file create the in your theme web/css/source/_extend.less and:

@import 'themeDir\web\css\source_theme.less';

Answer 2

you can try this way ..

app/design/frontend/Theme/Packagename/web/css/source/_theme.less file with the following code:

//  Primary button
 @button-primary__color: @color-white;
 @button-primary__hover__color: @color-white;
 @button-primary__background: @color-orange-red1;
 @button-primary__hover__background: @color-orange-red4;
 @button-primary__border: 1px solid @color-orange-red2;
 @button-primary__hover__border: 1px solid @color-orange-red2;

After use this command step by step

rm -rf var/cache/* var/generation/* var/page_cache/* var/view_preprocessed/*

rm -rf var/cache/* generated/*

php bin/magento setup:static-content:deploy -f