Cant't remove blue link text decoration from button

tiberhockey 0
Viewed 31

I have have link button but I cant remove the blue link decoration inside my update button(class=updatebut)

I have tried many thins such as putting !important on my css file and it not working either

I also tried .box-table2 .updatebut a {} but it doesnt work either

EDIT : I AM USING THE DJANGO FRAMEWORK. CAN THAT CAN CAUSE THE PROBLEM?

here is my html file. dashboard.html

body {
  background-color: rgb(29, 26, 39);
  background-image: linear-gradient(135deg, rgba(255, 102, 161, 0.15) 0%, rgba(29, 26, 39, 0.15) 35%);
  color: white;
}

.box-table2 {
  width: 900px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 120px;
}

.table {
  color: white;
}

.thead-color {
  background-color: rgb(81, 45, 168);
}

.updatebut {
  padding: 4px 20px;
  border-radius: 4px;
  color: white;
  background-image: linear-gradient(to right, rgb(103, 58, 183), rgb(81, 45, 168));
  border: none;
  font-size: 15px;
  margin-right: 20px;
}

.updatebut a {
  text-decoration: none !important;
}
<div class="box-table2">

  <table class="table">
    <thead class="thead-color">
      <tr>
        <th scope="col">Account</th>
        <th scope="col">Server</th>
        <th scope="col">Telegram</th>
        <th scope="col">Balance</th>
        <th scope="col">Risk %</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for accounts in data %}
      <tr>
        <td>{{accounts.accountid}}</td>
        <td>{{accounts.mt5server}}</td>
        <td>{{accounts.telegramchannel}}</td>
        <td>{{accounts.balance}}</td>
        <td>{{accounts.riskpertrade}}</td>
        <td><a href="{% url 'update-account' accounts.id %}" class="updatebut">Update</a><a href="{% url 'delete-account' accounts.id %}" class="deletebut">Delete</a></td>

      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

django css html
1 Answers

Since the class is added to <a>, thus you have to set the style directrly to .updatebut or a.updatebut instead of .updatebut a

Because, .updatebut a means <a> under .updatebut class. Your a is not a child of class .updatebut. It is updatebut itself.

Or,

Add .updatebut class to the <button> instead of <a>

body {
  background-color: rgb(29, 26, 39);
  background-image: linear-gradient(135deg, rgba(255, 102, 161, 0.15) 0%, rgba(29, 26, 39, 0.15) 35%);
  color: white;
}

.box-table2 {
  width: 900px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 120px;
}

.table {
  color: white;
}

.thead-color {
  background-color: rgb(81, 45, 168);
}

.updatebut {
  padding: 4px 20px;
  border-radius: 4px;
  color: white;
  background-image: linear-gradient(to right, rgb(103, 58, 183), rgb(81, 45, 168));
  border: none;
  font-size: 15px;
  margin-right: 20px;
}

a.updatebut {
  text-decoration: none !important;
}
<div class="box-table2">

  <table class="table">
    <thead class="thead-color">
      <tr>
        <th scope="col">Account</th>
        <th scope="col">Server</th>
        <th scope="col">Telegram</th>
        <th scope="col">Balance</th>
        <th scope="col">Risk %</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for accounts in data %}
      <tr>
        <td>{{accounts.accountid}}</td>
        <td>{{accounts.mt5server}}</td>
        <td>{{accounts.telegramchannel}}</td>
        <td>{{accounts.balance}}</td>
        <td>{{accounts.riskpertrade}}</td>
        <td><a href="{% url 'update-account' accounts.id %}" class="updatebut">Update</a><a href="{% url 'delete-account' accounts.id %}" class="deletebut">Delete</a></td>

      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

Hind Sagar Biswas0
Related