Ho provato!!! grazie all'aiuto di "lemonsong" sono riuscita! se può essere utile a qualcuno principiante come me, vi posto il codice che con un copia e incolla vi permette di realizzare  un pulsante a sfondo grigio, smussato agli angoli con il testo bianco. Poi divertitevi a personalizzarlo:

<style type="text/css">

input.button_example{
border:1px solid #616261; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;width:246px;font-size:17px;font-family:tahoma, verdana, arial, sans-serif; padding: 10px 10px 10px 10px; font-weight:bold; text-align: center; color: #FFFFFF; background-color: #7d7e7d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7d7e7d), to(#0e0e0e));
background-image: -webkit-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: -moz-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: -ms-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: -o-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: linear-gradient(to bottom, #7d7e7d, #0e0e0e);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7d7e7d, endColorstr=#0e0e0e);
}

input.button_example:hover{
border:1px solid #4a4b4a; background-color: #646464;
background-image: -webkit-gradient(linear, left top, left bottom, from(#646464), top(#282828));
background-image: -webkit-linear-gradient(top, #646464, #282828);
background-image: -moz-linear-gradient(top, #646464, #282828);
background-image: -ms-linear-gradient(top, #646464, #282828);
background-image: -o-linear-gradient(top, #646464, #282828);
background-image: linear-gradient(to bottom, #646464, #282828);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#646464, endColorstr=#282828);
}
</style>

<form> <input type="button" class="button_example" value="PREVIEW BUTTON" /> </form>

Purtroppo usando lo stesso codice ma inserendo gli angoli arrotondati del pulsante, cambiando il colore e il testo, il pulsante viene blu invece che verde e senza angoli arrotondati. qualcuno sa dirmi dove sbaglio? grazie :)

<style type="text/css">

input.button_example{

border:1px solid #92b12e; -webkit-border-radius: 11px; -moz-border-radius: 11px;border-radius: 11px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #AFCF48; background-image: -webkit-gradient(linear, left top, left bottom, from(#AFCF48), to(#AFCF48));
background-image: -webkit-linear-gradient(top, #AFCF48, #AFCF48);
background-image: -moz-linear-gradient(top, #AFCF48, #AFCF48);
background-image: -ms-linear-gradient(top, #AFCF48, #AFCF48);
background-image: -o-linear-gradient(top, #AFCF48, #AFCF48);
background-image: linear-gradient(to bottom, #AFCF48, #AFCF48);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#AFCF48, endColorstr=#AFCF48);
}

input.button_example:hover{

border:1px solid #748c25;
background-color: #95b52f; background-image: -webkit-gradient(linear, left top, left bottom, from(#95b52f), to(#95b52f));
background-image: -webkit-linear-gradient(top, #95b52f, #95b52f);
background-image: -moz-linear-gradient(top, #95b52f, #95b52f);
background-image: -ms-linear-gradient(top, #95b52f, #95b52f);
background-image: -o-linear-gradient(top, #95b52f, #95b52f);
background-image: linear-gradient(to bottom, #95b52f, #95b52f);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#95b52f, endColorstr=#95b52f);
}

</style>

<form> <input type="button" class="button_example" value="Leggi tutto..." /> </form>

Meglio usare 2 immagini con effetto rollover, piuttosto, e togli il problema CSS3...

Per forzare l'anteprima cosa intendete? 

Anche con anteprima forzata non cambia nulla.... Però ho fatto una scoperta.

Avevo inserito un pulsante nel "piè di pagina" con sfondo blu - formato rettangolo. Quello mi condizionava anche gli altri pulsanti. Tolto il codice dal piè pagina adesso anche a me il pulsante "leggi tutto" mi appare con gli angoli stondati e a fondo verde come a Lemonsong. Contenta di aver trovato il rpoblema, ma il fatto di non poter avere nella stessa pagina pulsanti in css3 con codici diversi è un limite, ma se non esiste altra soluzione....

Giusto!! infatti  ho cambiato il nome e coesistono adesso! :D L'avevo detto che sono inesperta, Grazie veramente, a volte basta dire una cosa che per voi è data per scontata che risparmiate notti insonni a novizi come me :) Ora mi resta da risolvere come mettere il pulsante in coda al testo dato che il pulsante è un codice e il testo è testo... speriamo bene. le "dritte" sono sempre gradite ;)

ma all'interno della casella di testo metto il codice? perchè ho provato e infatti  il pulsante si vede(se selezioni però l'opzione della casella testo "abilita codice html"). Solo che il pulsante diventa piccolo e grigio nell'anteprima. Se invece nella pagina hai una casella html con lo stesso codice e nome anche il pulsante html inserito nella casella di testa prende le sembianze giuste... boh...mistero per me

se inserisco un oggetto html sotto la casella di testo questo pulsante dista troppo dal testo ...non è bello a vedersi ecco perchè cercavo l'alternativa di cui sopra---

ok!!! tutto a posto seguendo il tuo consiglio... Grande Mirko!