1

Tenho uma hyperligação que necessito de estilizar usando CSS fazendo que parece um botão isto com CSS claro, a minha pergunta é que como chamo um hyperlink em CSS, ja tentei com div, ja tentei atribuir um id a tag .

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

o codigo CSS ja tenho feito

                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 nao sei como fazer a ligacao entre um hyperlink e o CSS

4 Respostas 4

1

Para fazer a chamagem de estilização é bem simples e existem varios jeitos possiveis. Lembrando que você definir o style pelo próprio html ou css

Você pode chamar a estilização por diversas maneiras... Pode chamar pelo parentesco, id do elemento, classe, tipo de componente e outros.

Para chamar por classe: use .nome-da-classe Para chamar por id: use #id-do-componente Para chamar por estilo de componente use: componente {}

Codigo html:

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

Parentesco:

.delete-area a {
   //ESTILO
}

Classe:

.delete-a {
   //ESTILO
}

Id do elemento:

#delete {
   //ESTILO
}

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

0

A ligação, se entendi direito, é assim

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;
}

Parecido com botão mesmo é assim

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>

2
  • parece ser uma boa soluçao, eu editei o meu post pois o CSS eu ja tenho feito, mas mais uma vez não sei porque no meu projecto nao esta a funcionar! Commented 1/05/2017 às 20:13
  • não falta a cor não?
    – user60252
    Commented 1/05/2017 às 20:41
0

Você pode setar uma class no seu elemento a

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

E fazer os devidos tratamentos em 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;
}

Resultado final:

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>

0

Talvez resolva seu problema utilizando uma pseudo-classe no elemento a (<a></a>)

São essas as pseudo-classe para 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")) */

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .