Servizi Web

Pipeline progetta e sviluppa servizi per il web.
Contattaci, studieremo le tue esigenze e metteremo in atto una strategia mirata.

Gestione Campagne Adwords

Se vuoi incrementare il traffico sul tuo sito web, Pipeline ti propone
la realizzazione e la gestione completa di campagne pubblicitarie Adwords.

LEGGI TUTTO

SEO e posizionamento

Oggi è necessario che il sito web sia ben indicizzato da Google e dai motori di ricerca,
per generare traffico, portare nuovi clienti e in definitiva, incrementare il tuo business.

LEGGI TUTTO

Migrazione siti Joomla 3

Un sito Joomla va mantenuto e aggiornato costantemente,
i rischi di una versione obsoleta sono molti

LEGGI TUTTO

realizzazione web
seo e posizionamento
profili sociali

Come inserire un bottone sul sito web

web-buttons-pipelineAvete bisogno di mettere un bottone carino sulla pagina del vostro sito? Può essere utile per evidenziare un link, per far scaricare un file dal vostro sito, per invitare gli utenti a iscriversi a newsletter o per formare un menu.

Con il solo uso di html riusciamo a creare dei bottoni poco accattivanti. Un bottone semplice lo otteniamo inserendo il seguente codice:

<button type="button">Click Me!</button>

Invece se vogliamo personalizzare il nostro bottone, vi suggerisco di usare un servizio gratuito per creare un bottone web

come-inserire-un-bottone-web

A sinistra troviamo degli esempi personalizzabili dei bottoni, in centro si trova la preview del nostro bottone e a destra il codice da inserire nella pagina web del sito. Personalizziamo uno dei bottoni proposti da questo servizio. Clicchiamo a sinistra per selezionale il template o ora vediamo le opzioni che si trovano nella la parte centrale in basso.

esempio-bottone-web

Sette caselle con i colori ci danno la possibilità di cambiare il colore del background, del testo, delle sfumature del bottone. Ci sono i set di colori diversi già prescelti o si può andare a modificare ogni singola opzione.

pipeline-bottoni-web

Una volta che abbiamo ottenuto la combinazione desiderata copiamo separatamente il codice HTML che andrà inserito direttamente nella pagina deselezionando CSS e cliccando su Copy code:

pipeline-bottoni-come-inserire

Questo è il codice che abbiamo copiato. Lo inseriamo sulla pagina web dove ne abbiamo bisogno.

 

<a href="#" class="myButton">Bottone nostro sito web</a>

Ci manca la parte dello stile che va inserita all'interno del file con estensione .css del vostro sito. Ecco il codice (Ho deselezionato HTML e ho selezionato CSS):

 

.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.myButton:active {
	position:relative;
	top:1px;
}

E’ possibile inserire tutto il codice all’interno della pagina HTML senza distinguere tra file .css e .html. Selezioniamo entrambe le caselle sia CSS sia HTML, ma dopo la prima stringa bisogna aggiungere

 

<style>

 

E alla fine del codice

 

</style>

 

Codice finale:

 

<a href="#" class="myButton">themeforest</a>
<style>
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #91b8b3;
	box-shadow:inset 0px 1px 0px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#768d87;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2b665e;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0);
	background-color:#6c7c7c;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>
Bottone Pipeline

 

Portfolio

richiedi informazioni