Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Verschillende buttons....

bewerkt wo 7 jan 2015 in Stylesheets Posts: 32
Hallo,

Ik was van plan een button te maken voor Twitter, Helpchat en email.
Deze 3 buttons zouden alle drie een eigen kleur krijgen om variate te creeren.

input[type=submit],
button .twitter {
margin: 0px;
background: #56A3D9;
color: #fff;
font-size: 18px;
padding: 5px 10px 5px 10px;
border-radius: 1px;
font-family: Segoe UI;
border: 0px;
opacity: 1;
}
button.twitter:hover {
background: #56A3D9;
color: #fff;
}

input[type=submit] .twitter:hover {
background: #56A3D9;
color: #fff;
opacity: 1;
}


Het enige gedeelte van dit scriptje wat werkt is dit:

button.twitter:hover {
background: #56A3D9;
color: #fff;
}

Dit komt omdat een geen input[type etc in zit. Hoe maak ik de andere 2 van de 3 scriptjes ook werkend?


Alvast bedankt voor je reactie.

Reacties

  • bewerkt vr 30 jan 2015
    PMPosts: 415
    Geen idee wat je probeert te doen..?
    Ik neem aan dat button ook een class moet voorstellen? Dan moet je er een puntje voor zetten in de css, dus:
    .button versus button

    Met jouw css (puntjes er bij gezet) doet het al ietsin de juiste richting, al is de achtergronkleur hetzelfde als de hover achtergrondkleur...
    Verder mag je voor de duidelijkheid ook wel een beetje html erbij doen, want nu is het voor iedereen koffiedik kijken hoe of wat je met die classes wilt aanvangen/gebruiken (omdat alles hetzelfde eruit ziet en dan ook nog onjuist is opgeschreven)...

    ps, doe ook iets aan de uitlijning van je code, dit leest voor geen meter!

    Nuja, hier een voorbeeldje waar je mss iets mee kan (kleuren een beetje aangepast...))

    <style>
    .button.twitter {
    margin: 0px;
    background: #56A3D9;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    border-radius: 1px;
    font-family: Segoe UI;
    border: 0px;
    opacity: 1;
    }

    .button.twitter:hover {
    background: #ff0000;
    color: #000;
    }

    input[type=submit].twitter:hover {
    background: #ff0000;
    color: #000;
    opacity: 1;
    }
    </style>

    <input type="submit" value="twitter" class="button twitter" />
    <span class="button twitter">twitter</span>

    sidenote: border radius werkt niet als je border:0 gebruikt ;-)
    Patrimu
  • PMPosts: 732
    wat doet eigenlijk die opacity ? volgens mij is is dat overbodig.
    If it's not fun, you're not doing it right!
  • bewerkt vr 9 jan 2015
    PMPosts: 32
    Oh dankjewel VinTage, het is gelukt dankzij jouw.
    Rene dat was ik inderdaad nog vergeten weg te halen, had ooit wat uitgeprobeerd met fadein effect, maar dat wou ik niet meer dus verwijderde ik het even snel.

    PS: heb gelijk ff deze pagina bij bladwijzerbalk toegevoegd voor als ik het weer vergeet :)
  • PMPosts: 879
    Patrimu schreef: Oh dankjewel VinTage, het is gelukt dankzij jouw.
    Kost je een krat Duvel

    ;)
    Patrimu
Login of Registreer om te reageren.