html - Styling af knapper - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #17072 @ 15.07.12 23:27

Hej
Jeg har nu undret mig over hvordan jeg kan style knapper, således at jeg kan lave nogle knapper der passer ind i mit design, og bruge de samme knapper på alle systemer, i stedet for at de bare bruger deres standard-knapper. Jeg kan allerede gøre det med links. Med knapper kan jeg ændre tekstfarven og baggrundsfarven. Jeg kan også få en "custom" knap ind, men kan ikke rigtig komme videre derfra. Ligesom jeg kan med links hvor jeg definerer a.class:link til at være have min flotte knap og a.class:hover, a.class:focus til at have hover-effekten på min knap og a.class:active når man trykker på den. Men hvordan kan jeg style dette på submit, reset og buttons? Jeg har på fornemmelsen at det er noget med onClick, onfocus jeg skal have fat i, men ved ikke lige hvordan det skal se ud i CSS.
Det er jo meningen at en knap også skal ligne en knap når man trykker på den.
Jeg har styr på det hele, mangler bare lige lidt hjælp til hvad de elementer jeg skal style hedder i CSS og hvad jeg skal skrive for at style hover/focus og click.

12 svar postet i denne tråd vises herunder
6 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #16678 @ 15.07.12 23:33

281

Du kunne eventuelt gøre det med jquery's .button?

Bruger #17077 @ 16.07.12 01:47

-12

Hej Kenneth!

En nem måde og meget brugerdefineret måde at gøre det på er at:

1. Lav din egen knap uden tekst på den i PhotoShop/Paint eller hvad du nu bruger.
2. Sæt din knap hvor du synes den skal være, f.eks.

Overskrift

Hej, jeg er noget tekst og du kan købe mig

KØB

3. Så sætter du et baggrundsbillede på teksten KØB, og så får du din lille fikse knap som baggrund med teksten KØB.

Vupti - din egen brugerdefinerede og smarte knap

Bruger #13010 @ 16.07.12 09:01

440

Ligsom du bruger a.class:link på link så kan du bruge input.class:link og button.class:link.

Du kan bruge input[type=submit] hvis du vil ramme alle dine submit knapper.

CSS kode

 input, button{
    color:#003366;
    font-family:consolas,"lucida console",monospace;
    margin:0px;
    padding:5px;
    border:1px solid #999;
    font-size:14px;
    background:#fff url(baggrund.png) repeat-x left top;
    border-radius:5px;
    }

Bruger #13010 @ 16.07.12 09:29

440

Nej det ikke korrekt forstået.

Hvis du vil have alle dine input så skriver du sådan her.

CSS kode

 input{
     border:1px solid #999;
     }

Men det vil du nok ikke.

Men hvis du kun vil have dine input af typerne submit og reset så kan du gøre sådan her.

CSS kode

 input[type=submit], input[type=reset]{
     border:1px solid #999;
     }

Du kunne også give de input du vil bestemme udseende på en class som for eksempel <tinput class="formknap" type="submit"> også bruge...

CSS kode

 .formknap{
     border:1px solid #999;
     }

Eller...

CSS kode

 input.formknap{
     border:1px solid #999;
     }

Begge dele virker det bare hvor "præcis" man ønsker at være.

Der er altså flere måder at gøre det på så det bare hvad du mest har lyst til.

Hvis du bruger input[type=submit] så kommer det jo til at påvirke alle dine submit knapper og det er jo ikke sikkert du ønsker det.

Indlæg senest redigeret d. 16.07.2012 09:32 af Bruger #13010

Bruger #13010 @ 16.07.12 12:19

440

Yep ligesom med a links.

Kan da godt være det er lidt anderledes men du burde kunne gøre det på samme måde.

Bruger #16016 @ 16.07.12 13:13

For at fjerne kanter i CSS bruger du bare border:0px; ved alle dine knapper:

CSS kode

 body {
      background-color: #167cc6;
      font-family: "Comic Sans MS";
  }
  input.gem {
      display: block;
      width: 100px;
      height: 50px;
      background: url(../img/submit.png) no-repeat 0 0;
      outline: none;
      border:0px;
  }
  input.gem:hover {
      background: url(../img/submit.png) no-repeat 0 -50px;
      border:0px;
  }
  input.gem:active {
      background: url(../img/submit.png) no-repeat 0 -100px;
      border:0px;
 }
  input.ryd {
      display: block;
      width: 100px;
      height: 50px;
      background: url(../img/submit.png) no-repeat 0 0;
      outline: none;
      border:0px;
  }
  input.ryd:hover {
      background: url(../img/submit.png) no-repeat 0 -50px;
      border:0px;
 }
  input.ryd:active {
      background: url(../img/submit.png) no-repeat 0 -100px;
  }
  input.knap {
      display: block;
      width: 100px;
      height: 50px;
      background: url(../img/submit.png) no-repeat 0 0;
      outline: none;
      border:0px;
  }
  input.knap:hover {
      border:0px;
      background: url(../img/submit.png) no-repeat 0 -50px;
  }
  input.knap:active {
      border:0px;
      background: url(../img/submit.png) no-repeat 0 -100px;
  }

Bruger #17072 @ 16.07.12 09:03

152

@Daniel: Jo, har du et link til et jquery button plugin du kan anbefale?

@Pascal: I dit eksempel, bruger du så en knap eller et link? Det er jo knapper jeg vil lave et custom design på. Det kan jeg allerede med links.

De ting jeg godt vil style er:

HTML kode

 <input type="submit" name="submit" value="Submit knap" />
 <input type="reset" name="reset" value="Reset knap" />
 <input type="button" name="button" value="Normal knap" />

@scootergrisen: Så hvis jeg vil style min submit knap, så kan jeg gøre som i dit eksempel men i stedet for at skrive input, button, skriver jeg input, submit og på reset knapper skriver jeg input, reset

Er det korrekt forstået?

Indlæg senest redigeret d. 16.07.2012 09:05 af Bruger #17072