button rollover image κολησα!

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
driveland
Δημοσιεύσεις: 59
Εγγραφή: 04 Ιούλ 2010 15:40

button rollover image κολησα!

Δημοσίευση από driveland » 27 Φεβ 2011 19:43

μια μερα πήγε χαμένη δε μπορω αλλο...

ενα απλό κουμπάκι θελω να φτιάχω rollover με την παρακάτω εικόνα...
αλλά χρησιμοποιώντας css.
ενα κουμπακι δε μπορω να βγαλω ποτε κρεμάει απο εδω ποτε απο εκει...

ακριβώς το μέγεθος της εικόνας στη μέση 33px



php

Κώδικας: Επιλογή όλων

<form action="index.php" method="post" name="diodio" id="diodio" class="diodio_form">
<input type="submit" class="miomio_button" value="Δείτε όλες τις προσφορές" title="Δείτε όλες τις προσφορές" /> 
</form>
css

Κώδικας: Επιλογή όλων

.miomio_button&#123; width&#58;177; padding-left&#58;0px!important; line-height&#58; 33px;&#125;
.miomio_button &#123;height&#58;33px; background&#58;url&#40;'offers_but.png'&#41; no-repeat left -7px; &#125;
.miomio_button &#123; border&#58; none; cursor&#58;pointer; background&#58; none; width&#58; 174px; text-align&#58;left; height&#58;33px; font-weight&#58;bold; font-family&#58;inherit; vertical-align&#58; middle; overflow&#58;hidden; &#125;
input.miomio_button &#123;border&#58; none; padding-bottom&#58;0px; line-height&#58;33px; margin-bottom&#58;6px; border-color=#FFFFFF; display&#58; block; height&#58;33px; cursor&#58;pointer; text-align&#58;center; text-decoration&#58;none; text-transform&#58;none; &#125; 
input&#58;hover.miomio_button &#123; &#125;
Συνημμένα
submit-button.png
submit-button.png (2.4 KiB) Προβλήθηκε 1894 φορές

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6234
Εγγραφή: 30 Νοέμ 2004 03:09

button rollover image κολησα!

Δημοσίευση από fafos » 27 Φεβ 2011 22:01

apo edo: http://www.freestuff.gr/forums/viewtopic.php?p=511406

Κώδικας: Επιλογή όλων

.miomio_button&#123;
width&#58;174px;
height&#58; 33px;
background &#58; url&#40;submit-button_746.png&#41; no-repeat;
border &#58;  0px;
cursor &#58; pointer;
text-align&#58;left;
font-weight&#58;bold;
font-size &#58; 11px;
font-family &#58; Arial;
padding-left &#58; 6px;
padding-top &#58; 3px;
&#125;


.miomio_button&#58;hover&#123;
background-position&#58;left bottom;
color&#58;#cc0000;
&#125;
grammatoseires, colors klp ta evala gia to demo..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες