Why does my CSS button turn blue after clicking?

ack
Tourist
6 0 2

I have a custom section I made for a button called call-to-action in my Editions theme.  The button mostly works but if I've clicked the button before the a, a:visited class turns my text blue.

ack_0-1607705732397.png

How can I fix this? Section HTML and CSS for button section below.

 

<hr>
<div id="section-cta">
  <div class="container">
    <h3> {{ section.settings.text-box }} </h3>
    <a href="{{ section.settings.link }}" class="button">{{ section.settings.linktext }}</a>
  </div>
</div>
<hr>

{% schema %}
{
  "name": "Call to action",
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    },
    {
      "id": "link",
      "type": "url",
      "label": "Button link"
    },
    {
      "id": "linktext",
      "type": "text",
      "label": "Button text",
      "default": "Click here"
    }
  ]
  ,
  "presets": [
    {
      "name": "Call to Action",
      "category": "Call To Action"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
//button for call-to-action section
.button {
  font-family: Helvetica, "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
  display: inline-block;
  padding: 0.85em 1.5em;
  font-size: 1.5em;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: /*!setting.submit-button-color{*/#00a044/*}*/;
  border: none;
  border-radius: 0.62em;
  background-color: /*!setting.submit-button-color{*/#00a044/*}*/;


}

.button:hover{
  background-color: #018739;
  color: #ffffff;
}

 

Replies 2 (2)

diego_ezfy
Shopify Partner
2958 568 891

Please share the URL to your website.

ack
Tourist
6 0 2