CSS - styling a hyperlink

Question

I have a hyperlink that I need to style using CSS doing that looks like a button this with clear CSS, my question is that as I call a hyperlink in CSS, already tried with div, already tried to assign an id to tag .

<td><a href="delete_rows.php?del=<?php echo $books->ISBN; ?>">Delete</a></td>

the CSS code I have already made

                width: 100px;
                background: rgba(0, 0, 255, 0.3);
                font-weight: bold;
                color: white;
                border: 0 none;
                border-radius: 5px;
                cursor: pointer;
                padding: 5px 5px;
                margin: 5px 5px;

so I don’t know how to make the link between a hyperlink and CSS

Answer 1

To make the styling call is very simple and there are several possible ways. Remember that you define the style by html or css itself

You can call styling in many ways... You can call by kinship, element id, class, component type and others.

To call by class: use .nome-da-classe To call by id: use #id-do-componente To call component style use: componente {}

Html code:

<div class="delete-area">
    <td><a class="delete-a" id="delete" href="delete_rows.php?del=<?php echo $books->ISBN; ?>">Delete</a></td>
</div>

Kinship:

.delete-area a {
   //ESTILO
}

Class:

.delete-a {
   //ESTILO
}

Element id:

#delete {
   //ESTILO
}

https://codepen.io/dgrfps/pen/BaQGoby

Answer 2

Maybe solve your problem using a pseudo-class in the a element (<a></a>)

These are the pseudo-classes for links:

a:link    /* (define o estilo do link no estado inicial) */    
a:visited /* (define o estilo do link visitado) */   
a:hover   /* (define o estilo do link quando passa-se o mouse sobre ele) */    
a:active  /* (define o estilo do link ativo (o que foi "clicado")) */

Answer 3

The call, if I understand correctly, is like this

HTML

<a class="btn-delete" href="delete_rows.php?del=<?php echo $books->ISBN; ?>">Delete</a>

CSS

.btn-delete{
width: 100px;
background: rgba(0, 0, 255, 0.3);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 5px;
cursor: pointer;
padding: 5px 5px;
margin: 5px 5px;
}

Just like a button

a.button{
background: transparent url('http://kithomepage.com/sos/gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; 
line-height: 15px; 
height: 23px; 
padding-left: 9px;
text-decoration: none;
}

a:link.button, a:visited.button, a:active.button{
color: #494949; /*cor do texto do botão*/
}

a.button span{
background: transparent url('http://kithomepage.com/sos/gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0;
}

<a class="button" href="delete_rows.php?del=<?php echo $books->ISBN; ?>"><span>Delete</span></a>

Answer 4

You can set a class in its element a

<a class="btn-delete" href="delete_rows.php?del=<?php echo $books->ISBN; ?>">Delete</a>

And do the proper treatments in CSS

a.btn-delete {
  width: 100px;
  background: rgba(0, 0, 255, 0.3);
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 5px;
  margin: 5px 5px;
}

Final result:

a.btn-delete {
  width: 100px;
  background: rgba(0, 0, 255, 0.3);
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 5px;
  margin: 5px 5px;
}

<a class="btn-delete" href="delete_rows.php?del=<?php echo $books->ISBN; ?>">Delete</a>