Gruppi di pulsanti orizzontali | Guida creare con i CSS

Gruppi di pulsanti orizzontali


Vediamo come ceme creare gruppi di pulsanti orizzontali come potete vedere qui:

Pagina web con gruppi di pulsanti orizzontali

Per ottenere questo risultato nella pagina web bisogna scrivere i seguenti codici html.



Codice HTML

<div class="btn-group">
 <form method="get" action="URL_PAGINA_WEB"><button style="width:250px">Creare menù con i CSS</button></form>
 <form method="get" action="URL_PAGINA_WEB"><button style="width:250px">Inserire immagini</button></form>
 <form method="get" action="URL_PAGINA_WEB"><button style="width:250px">Creare bottoni con i CSS</button></form>
 <form method="get" action="URL_PAGINA_WEB"><button style="width:250px">Creare forms con i CSS</button></form>
 <form method="get" action="URL_PAGINA_WEB"><button style="width:250px">Creare tabelle con i CSS</button></form>
 <form method="get" action="URL_PAGINA_WEB"><button style="width:250px">Altri elementi con i CSS</button></form>
</div>


Codice CSS

.btn-group button {
 background-color: #4CAF50;
 border: 1px solid green;
 color: white;
 font: 18px Arial, Helvetica, sans-serif;
 padding: 10px 24px;
 cursor: pointer;
 float: left;
}



.btn-group button:not(:last-child) {
 border-right: none; /* Prevent double borders */
}



/* Clear floats (clearfix hack) */
.btn-group:after {
 content: "";
 clear: both;
 display: table;
}



/* Add a background color on hover */
.btn-group button:hover {
 background-color: #3e8e41;
}