"Segui l'attività"

Salve, avete presente la scritta "segui l'attività di forumattivo" seguita dalle icone dei social?
Ecco, a me mi hanno fornito diverse icone di siti dove va in onda il mio show e vorrei mettere quelle. Come faccio ad ottenere un simile effetto?

UP

HTML

Codice:

<img class="BottoneDiego" src="LINK_TUA_IMMAGINE"/>

CSS

Codice:

.BottoneDiego{
background:#777777;
border-radius: 3px;
transition: 1s;}

.BottoneDiego:hover{
background: red;
}

Per far si cche funzioni le immagini dovranno essere trasparenti e i colori da me inseriti sono stati puramente messi a caso: sistemali tu con dei colori a piacimento.

alla prossima..

Ma HTML dove lo metto??

Nel punto in cui tu vuoi che appaia il bottone..

Ehm... Non ho capito....se lo volessi fare apparire nello stesso punto in qui lo avete voi? ? Come faccio??

@Teodoro96 messaggio sull'indice

Scusate, non capisco.
Io sto lavorando e cercando di ottenere questi 3 effetti:


Come devo fare?? Dove devo mettere i vari codici?



Per questi 2 invece?? Per la tabella contenente gli annunci, lo staff e tutto i, resto, ne ho creata io una qui siamo a posto. Ma dove inserisco il tutto? La tabella "Collegato come" già pronta e inserita in messaggi sull'indice. Ma tutto il resto?? Perché se metto tutto li, mi esce una cosa sotto l'altra, ma voglio ottenere un'effetto come sul FDF

Puoi inserire il tutto nel messaggio sull'indice come ti avevo già detto..
per inserire due tabelle basta inserirne una => a capo => altra tabella

Di solito quei codici hanno un div e un css...in questo caso lo puoi inserire dove vuoi tutto va dove lo metti devi lavorando sul css..non necessariamente lo devi inserire sull'indice del forum esempio :
puoi inserire il div in un widget e il css nel foglio di style poi sposti tutto come vuoi tu