[CSS3] Pulsanti e bottoni personalizzati

Buonasera,
mi piace molto quel bottone blu che trovate qui.

Sto tentando di copiarlo ma senza successo. I codici dovrebbero essere:

Codice HTML:

---

<a class="btn btn-primary btn-large">Learn more »</a>

---

Codice:

---

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
          border-radius: 6px;
}

.btn {
  border-color: #c5c5c5;
  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

---

Purtroppo a me esce un bottone fisso blu senza effetti ne altro. Qualcuno può aiutarmi a capire come avere quel bottone?

Solo per capire il tuo risultato, potresti postare un immagine del tuo pulsante? Intendo quello fatto da te.

Si scusa hai ragione. E' tutto il pomeriggio che perdo tempo dietro stupidaggini tipo queste ed ho il cervello in tilt.

http://img84.imageshack.us/img84/5279/bottonej.png

Prova a sostituire il class .btn con questo

Codice:

---

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
 /* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0A6CFF 0%, #130EB0 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0A6CFF 0%, #130EB0 100%);

/* Opera */
background-image: -o-linear-gradient(top, #0A6CFF 0%, #130EB0 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0A6CFF), color-stop(1, #130EB0));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0A6CFF 0%, #130EB0 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0A6CFF 0%, #130EB0 100%);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

---

EDIT:

A me esce così

http://img5.imageshack.us/img5/5016/bottonep.png

Con il tuo codice adesso si vede così:

http://img838.imageshack.us/img838/417/bottone2.png

Strano, ma che browser usi?

Se usi IE8 oppure IE9

aggiungi anche queste 2 righe

Codice:

---

/* IE8 - IE9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#0A6CFF, endColorstr=#130EB0)";

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0A6CFF', endColorstr='#130EB0',GradientType=100% ); /* ie */

---

Chrome ultima versione.

IE10/FF18 vedono un bottone senza angoli tondi blu.

Anche io uso Chrome e lo vedo senza problemi il bottone.

Puoi mettermi online una pagina con il codice che a te funziona?

Scarichi il css: http://twitter.github.com/bootstrap/.../bootstrap.css
Fai una cartella con index.html e:

Codice HTML:

---

<link href="./bootstrap.css" rel="stylesheet">
<a class="btn btn-primary btn-large">Learn more »</a>

---

- E poi togli da bootstrap.css tutto ciò che non riguarda il button (attento a non sciacallare troppo) :P
In trenta secondi ti ritrovi il tuo bottone bello e perfettamente funzionante *** :wink:

Ottimo darkwolf. Quello è il risultato che voglio.

Al posto di fare come hai fatto tu io più semplicemente ho salvato la pagina web e l'ho editata con Microsoft Expression Web (SP2) e mi sono copiato in una nuova pagina solo il bottone e il programma automaticamente mi ha copiato tutto il codice CSS interessato ma comunque non funzionava.

L'esempio che tu mi hai mostrato è perfetto solo che c'è tanto di quel codice inutile che vorrei evitare...

Comunque per ora mi sono salvato la tua pagina web e leverò pezzo dopo pezzo per capire dove sta il problema. Tuttavia se qualcuno può aiutarmi o ha un codice alternativo per produrre lo stesso risultato comunque l'apprezzo :-)

Ma vedi che io ho tolto già praticamente la maggiorparte del codice del css originale :wink:
-

Codice PHP:

---

.btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #bbbbbb;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}

.btn:first-child {
*margin-left: 0;
}

.btn:hover {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}

.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

.btn.active, .btn:active {
background-color: #cccccc \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.btn-large {
padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
margin-top: 4px;
}

.btn-primary.active {
color: rgba(255, 255, 255, 0.75);
}

.btn {
border-color: #c5c5c5;
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}

.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
color: #ffffff;
background-color: #0044cc;
*background-color: #003bb3;
}

.btn-primary:active, .btn-primary.active {
background-color: #003399 \9;
}


---

Ottimo. Io ero arrivato alla tua stessa soluzione. Ti ringrazio mi sei stato utilissimo.

Comunque a livello informativo vi dico che il problema che io non riuscivo a vedere i bottoni e che il mio editor aggiungeva i caratteri UTF-8 all'inizio del file .css e, ovviamente, non erano visibili nello stesso editor e quindi ho dovuto utilizzare il blocco note per sistemare tutto.

Ok, figurati (cancello i file dal mio server e disattivo i link) :wink: