How can I darken the colour of a button before someone hovers on it?

Store Design
1

How can I darken the colour of a button before someone hovers on it?

2

Hi @StitchBeyond

Can we get the URL of the website and tell us which button you want to change..?

3

@yocave

Of course, doesn’t everyone accept if it works? Please see screenshot of url.

StitchBeyond_0-1642275309963.png
StitchBeyond_0-1642275309963.png1109×697 616 KB

4

@StitchBeyond

.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 8px 15px;
  background-color: #ecbb20;
  color: var(--color-btn-primary-text);
  font-family: var(--font-stack-header);
  font-style: var(--font-style-header);
  font-weight: var(--font-weight-header);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: normal;
  font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
}

So, you have to go into the theme.scss file, find the class named :

.btn, .shopify-payment-button .shopify-payment-button__button–unbrande

In that class you will see code ‘background-color:#ecbb20;’

that’s it, you can put whatever color you want, just change the HEX CODE..

5

@yocave

Thanks I’ll try this, I think it’s modifying the background colour from the overall theme colour selected. Is there any way just to update line# 1433 & 1460 that has this?

background-color: var(–color-btn-primary)

6

@yocave

Mine doesn’t have a hex code it has the line I posted previously and below. Should I input hex code in the brackets?

background-color: var(–color-btn-primary)

7

@StitchBeyond

Instead this

background-color: var(--color-btn-primary);

Put this

background-color: #YOUR HEX CODE OF COLOR;
1 Like
8

It worked thank you :slightly_smiling_face:

9

@StitchBeyond

Your welcome, I’m glad it worked.