How to prevent a button's style/colour from affecting every other button on the site?-CodePudding

Novice here.

I'm creating a button however when I upload it onto the webpage it affects every other button by changing the styling to match the new button.

I don't know how to make the styling specific to only that button and have it not affect anything else on the website. Thanks!

<html>

<head>
  <style>
    a:link,
    a:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    a:hover,
    a:active {
      background-color: #810001;
    }
  </style>
</head>

<body>
  <a href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>

</html>

CodePudding user response：

you can make specific id (using #) or class (using dot . can be used multiple times in html dom if you will use button many times)

<html>

<head>
  <style>
    a#someId:link,
    a#someId:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    a#someId:hover,
    a#someId:active {
      background-color: #810001;
    }
  </style>
</head>

<body>
  <a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>

</html>

CodePudding user response：

You can keep class or id to resolve this issue.

<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>

Add CSS to this particular id element. Check this : http://jsfiddle.net/wzfs238L/

CodePudding user response：

You can define the styling for a class, this snippet uses class name mybutton and shows one with the class added and one without.

<html>

<head>
  <style>
    a.mybutton:link,
    a.mybutton:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    a.mybutton:hover,
    a.mybutton:active {
      background-color: #810001;
    }
  </style>
</head>

<body>
<h2>With mybutton class</h2>
  <a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
  <h2>Without mybutton class</h2>
    <a href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>

</html>

CodePudding user response：

This is what you use 'classes' or 'ids' for. They help class a type of element for your page or identify a specific one you want to target in CSS. As @Rana suggested, w3schools has a page for this which might be helpful