css-Pulsanti con angoli arrotondati

CSS3
Bottoni con angoli arrotondati e sfondi con gradienti.

Bottoni

Pubblicato il: 27-4-2019

Ultima Modifica: 14-12-2024

In passato per creare dei pulsanti che avessero un vero aspetto di pulsante era necessario ad esempio se si volevano inserire angoli arrotondati ricorrere necessariamente a delle immagini, oppure anche se si voleva creare una tabella con angoli arrotondati oppure una o più delle sue celle era sempre necessario ricorrere a delle immagini che dovevano essere posizionate nel punto giusto. Il tutto risultava molto artificiofo e laborioso.

Oggi grazie ai CSS3 che rappresentano l'evoluzione dei più datati CSS CSS1 e CSS2 è possibile creare pulsanti che vengono creati con il Tag <button></button> e dare loro un aspetto migliore inserendo angoli arrotondati del raggio che vogliamo.

Inizio allora creando quattro pulsanti con il Tag <button></button>, il risultato di default è quello che possiamo vedere qui sotto.

Il codice è questo sotto.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Senza nome 1</title>
</head>

<body>
<button>pulsante1</button> 
<button>pulsante2</button> 
<button>pulsante3</button> 
<button>pulsante4</button> 
</body>

</html>

Adesso associo ad ogni pulsante una classe CSS per cambiare un pò l'aspetto, vediamo qua sotto il risultato e ancora più sotto il codice.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Senza nome 1</title>
<style type="text/css">

.puls{
border: none;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

</style>
</head>

<body>
<button class="puls">pulsante1</button> 
<button class="puls">pulsante2</button> 
<button class="puls">pulsante3</button> 
<button class="puls">pulsante4</button> 
</body>

</html>

Come si può vedere bene perchè il codice aggiunto è di colore rosso ho aggiunto una classe CSS di nome puls che rispettivamente toglie i bordi, aggiunge uno spazio all'interno dei pulsanti intorno ai bordi e cambia il tipo del font.

Adesso creerò altre quattro classi, una per ogni pulsante dove applicherò uno sfondo di colori diversi per ogni pulsante, poi applicherò una dimensione diversa per ogni pulsante del testo al suo all'interno, così facendo automaticamente si modificherà anche la dimensione del pulsante, quindi per ultimo aggiungerò l'istruzione per i bordi arrotondati.

Qui sotto il risultato e il codice aggiunto in colore rosso.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Senza nome 1</title>
<style type="text/css">

.puls1{
border: none;
background-color: gold;
font-size: 12px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.puls2{
border: none;
background-color: darkseagreen;
font-size: 16px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.puls3{
border: none;
background-color: chartreuse;
font-size: 20px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.puls4{
border: none;
background-color: khaki;
font-size: 24px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

</style>
</head>

<body>
<button class="puls1">pulsante1</button> 
<button class="puls2">pulsante2</button> 
<button class="puls3">pulsante3</button> 
<button class="puls4">pulsante4</button> 
</body>

</html>

Adesso aggiungo uno sfondo gradiente per ogni pulsante, sotto il risultato e il codice aggiunto.

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Senza nome 1</title>
<style type="text/css">

.puls11{
border: none;
background:linear-gradient(gold,red);
font-size: 12px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.puls21{
border: none;
background:linear-gradient(yellow,darkslateblue);
font-size: 16px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.puls31{
border: none;
background:linear-gradient(chartreuse,chocolate);
font-size: 20px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.puls41{
border: none;
background:linear-gradient(khaki,hotpink);
font-size: 24px;
border-radius: 6px;
padding: 10px 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

</style>
</head>

<body>
<button class="puls11">pulsante1</button> 
<button class="puls21">pulsante2</button> 
<button class="puls31">pulsante3</button> 
<button class="puls41">pulsante4</button> 
</body>

</html>