CSS - stylize a hyperlink

Question

CSS - stylize a hyperlink

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have a hyperlink that I need to stylize using CSS making it look like a button with clear CSS, my question is that as I call a hyperlink in CSS, I already tried with div, already tried to assign an id to the tag. >

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

the CSS code I've already done

                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;

I just do not know how to link between a hyperlink and CSS

html css

asked by anonymous 01.05.2017 / 21:25

3 answers

Execution of Python code with execution independently How to add a css class to an element according to the page accessed in vue.js

score 0 · Answer 1

The connection, 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;
}

Similar to the same 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>

score 0 · Answer 2

You can set a class in your 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;
}

End 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>

score 0 · Answer 3

You can solve your problem by using a pseudo-class in element a ( <a></a> )

These are the pseudo-class 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")) */