Code for back button colour

[Shex]

Hi folks! 

I'd really appreciate help with assigning colour, possibly with code, to a back button I used that was featured in another community post. I'm using Dawn theme and here's the code I used to assign the button:

<div class="back-button grid">
      <a class="product-form__submit button button--secondary" href="javascript&colon;history.go(-1)">back</a>
 </div>

and 

.back-button{text-align: center; display: block;}

And I'm super happy with the buttons location at the bottom of the product listing, and that it goes back to last page/collections…I Just can't seem to work out the colouring and would love it to match the rest of my website. 

Would anyone have an idea how to adapt or create code for this? Let me know if you'd like any extra info etc.

Thanks so much!

Shelley 

[CodingFifty · Accepted solution]

Hello,

Please try this code.

<div class="back-button">
  <a href="javascript&colon;history.go(-1)">Back</a>
</div>

<style>
  .back-button {
    text-align: center;
    margin-top: 20px;
  }
  .back-button a {
    background-color: #3498db; /* Button background color */
    color: #ffffff; /* Text color */
    padding: 10px 20px; /* Button padding */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    border: 1px solid #2980b9; /* Border color */
  }
  .back-button a:hover {
    background-color: #2980b9; /* Hover background color */
    color: #ffffff; /* Hover text color */
  }
</style>

[Shex]

Thanks so much!!!! Worked an absolute treat! 🙌

[CodingFifty]

You're welcome! @Shex 

[Ahmad31]

Hi @Shex, To style your back button in the Dawn theme and match it with the rest of your website, you need to add CSS rules to your theme's stylesheet or use the theme's custom CSS editor (usually found in the "Theme settings" under "Custom CSS"). Here's how you can modify your code to include coloring and other styling:

add this css to your theme.liquid file before </head> tag or in your theme css file:

.back-button {
    text-align: center;
    display: block;
    margin: 20px 0; /* Adjusts spacing if needed */
}

.back-button a {
    display: inline-block;
    padding: 10px 20px; /* Adjusts button size */
    color: #ffffff; /* Text color */
    background-color: #007BFF; /* Button background color */
    border: 2px solid #0056b3; /* Button border color */
    border-radius: 5px; /* Rounds the button edges */
    text-decoration: none; /* Removes underline */
    font-size: 16px; /* Adjusts font size */
    font-weight: bold; /* Makes text bold */
    transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
}

.back-button a:hover {
    background-color: #0056b3; /* Darker shade on hover */
    color: #ffffff; /* Maintains text color on hover */
    border-color: #003d80; /* Adjusts border on hover */
}

[Shex]

Thanks so much for that Ahmad 🙌