Verloop en afbeelding op knop Formulier verzenden?

Ik vroeg me af of er een manier is om een ​​afbeelding op een verzendknop te plaatsen met behoud van het verloop.

Dit is het verloop dat ik heb en gebruik.

enter image description here

Maar ik wil ook een afbeelding toevoegen, zoals hieronder. Maar door het toevoegen van de afbeelding heeft dit voorrang op het verloop.

enter image description here

Dit is de code die ik gebruik om de knop toe te voegen.

background-position:  center left;
background-image: url(../images/icons/cross.png);
background-repeat: no-repeat;

Hieronder is een photoshop-versie van wat ik wil, zoals je kunt zien zijn zowel het verloop als de afbeelding aanwezig.

enter image description here

Om het even welke ideeën? Vanzelfsprekend kun je geen afbeelding toevoegen aan een verzendknop via html? Of kan je?

Bijwerken

Hier zijn de fragmenten van de code

Gradient CSS

.whitegrad
{
background:#fefefe;
background: -moz-linear-gradient(top,  #fefefe 0%, #e3e3e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#fefefe), color-stop(100%,#e3e3e3));
   /* etc etc */
}

HTML voor het formulier

<form action='' method='post' class='addtofavorites' >
    <input type='hidden' class='atf_video_id' name='atf_video_id' value='' />
    <input class='whitebtn whitegrad rndrgt' type='submit' value='Add to Favorites' />

</form>
3
Kunt u de HTML-code voor de knop weergeven? Hoe wordt de gradiënt momenteel toegepast op de knop?
toegevoegd de auteur cdeszaq, de bron
Voeg de exacte CSS die u gebruikt toe aan uw bericht. Het hebben van de code is essentieel bij het debuggen van dingen.
toegevoegd de auteur cdeszaq, de bron
De eigenschap background gebruiken. Zoals achtergrond: -webkit-linear-gradient (top, # 83ab53 0%, # 7ca44b 49%, # 739946 50%, # 6b903e 100%); Uiteraard is er een voor elke browser.
toegevoegd de auteur Sean H Jenkins, de bron
Hmm, het is niet echt een bug. Omdat ik weet wat er gebeurt. De afbeelding overschrijft de gradiënt. Ik ben op zoek naar manieren om een ​​afbeelding toe te voegen aan de knop Verzenden met behoud van een verloop.
toegevoegd de auteur Sean H Jenkins, de bron

4 antwoord

Waarom zou je de afbeelding van een kruis gebruiken als je een echte tekstversie hebt die voor jou beschikbaar is?

U kunt de '+' opnemen in de knoptekst:

<button type="submit">+ Add to Favourites</button>

Of gebruik CSS-gegenereerde inhoud om het toe te voegen:

<button type="submit">Add to Favourites</button>

button:before {
    content: '+ ';
}

JS Fiddle demo.

3
toegevoegd
Wel, dank u welwillend! =)
toegevoegd de auteur David Thomas, de bron
..en de winnaar is ... David Thomas, voor zijn laterale denkvaardigheden!
toegevoegd de auteur Sean H Jenkins, de bron

HTML

You can’t add an image to <input type="submit"> via HTML, although the <button> element can contain arbitrary HTML. This article is worth a look, although I think there are some issues in getting the <button> to submit the form it’s inside reliably in different browsers.

CSS

Om het alleen met CSS te doen, moet je meerdere achtergrondafbeeldingen gebruiken . Browser-ondersteuning voor hen is:

  • Chrome 1 +
  • Firefox 3.6 +
  • IE 9 +
  • Opera 10.5 +
  • Safari 2 +

Het is een beetje lastig om dat te combineren met CSS-gradiënten, omdat Firefox, Opera en Chrome/Safari hun eigen gradiëntsyntaxen hebben, maar hier is een voorbeeld voor Firefox:

background-image: url(http://yubelr.com/images/icons/cross.png), -moz-linear-gradient(top, #fdd, #966);
background-repeat: no-repeat;
background-position: 3px 50%, 0 0;
padding-left: 10px;

U hebt een andere achtergrondafbeelding nodig voor elke verschillende browsegradensyntaxis.

CSS3 is leuk!

1
toegevoegd
Zeker - als u niet tevreden bent met een andere ervaring in oudere browsers, is dit niet de manier om te gaan.
toegevoegd de auteur Paul D. Waite, de bron
Dit is een goed idee, maar net als het probleem is het webontwerp compatibel met de browser.
toegevoegd de auteur Sean H Jenkins, de bron

The <button> tag lets you put HTML inside of it. You can add onclick + onkeypress event handlers to call submit() on the form. Then, you can keep the background gradient on the <button>.

Je kunt ook meerdere achtergronden gebruiken met CSS3, maar het wordt nog niet goed ondersteund.

1
toegevoegd

Met het knopelement kun je HTML toevoegen, zoals vermeld door John Kurlak en Paul D. Waite. Dus het is compatibel met IE8- in uw geval: u kunt een verloop op de knop en een HTML-afbeelding of een achtergrondafbeelding met een extra span hebben.

HTML image: http://jsfiddle.net/fm2s5/1/

background-image and span: http://jsfiddle.net/VYwhD/

Het eerste wat je kunt oplossen met formulierelementen is lettertype en lettertypefamilie, dan regelhoogte en speel vervolgens met opvulling om de gewenste hoogte te krijgen (hoewel de hoogte niet is opgelost, kan tekst uitvouwen tijdens zoomen als gebruikers dat willen) en het is onnodig. Opvulling is genoeg) Verticaal uitlijnen is een beetje lastig, het zal anders zijn met en zonder een HTML-afbeelding, maar als u een van de twee methoden kiest, zullen er geen verschillen zijn.

Ik gebruikte http://fvsch.com/code/button-css/ voor het opnieuw instellen van de knop en http://www.colorzilla.com/gradient-editor/ # fefefe + 0, e3e3e3 + 100; Aangepast voor verloop inclusief IE.

0
toegevoegd