Butoane-link CSS
CSS poate fi folosit pentru a face linkurile HTML să arate ca niște butoane.
Combină mai multe proprietăți CSS, precum background-color, padding, text-decoration și display, pentru a afișa linkurile ca niște casete sau butoane.
Buton plin
Un link stilizat ca un buton roșu solid, care se întunecă la hover.
Prompt
O pagină HTML care stilizează un link ca un buton plin.
Într-un bloc
<style> intern, dați a:link și a:visited un fundal roșu (#f44336), text alb, padding de 14px 25px, text centrat, fără subliniere și afișare inline-block. La a:hover și a:active, schimbați fundalul în roșu. Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Buton cu chenar
Un link stilizat ca un buton cu chenar, care se umple cu verde la hover.
Prompt
O pagină HTML care stilizează un link ca un buton cu bordură, care se umple la survolare.
Într-un bloc
<style> intern, dați a:link și a:visited un fundal alb, text negru, o bordură de 2px solid green, padding de 10px 20px, text centrat, fără subliniere și afișare inline-block. La a:hover și a:active, setați un fundal verde și text alb. Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>