1-Click-Login Buttons (Twitter, Facebook, Google) + PSD

I needed bigger 1-click-login Buttons for 10-fast-fingers.com but couldn’t find any I liked. So I created them myself:

Here is the PSD: (Social Media) Login Buttons PSD

Every Button has three states: normal, hover and active (click). You can create additional Buttons quite easily. If you want to resize the Buttons, keep in mind to use the “Direct Selection Tool” in Photoshop as it is explained here: Resizing rounded rectangles in Photoshop. Sadly this alone want do it, you will have to manually resize a few of the other layers. If you have any questions about that, just post a comment (others will probably have a similiar question).

You can use these buttons for whatever you like (private, commercial, you name it) no attribution is required (but of course encouraged, if you have some spare room for a link, want to follow me on Twitter or have a sweet sweet Dribbble Invite). Just do with them what you like, modify, implement, share!


The Buttons are inspired by these: Social Sign in Buttons – Friday Freebie

The Google Icon is from here: Free Google Plus Icon Vector (maybe you can add a PSD-Version of the icons? Nevertheless, awesome work!!)

Want more?

If you want additional buttons (for example, OpenID, Yahoo, LinkedIn, etc.) just write me a comment.

Dieser Beitrag wurde unter Allgemein abgelegt und mit , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

12 Antworten auf 1-Click-Login Buttons (Twitter, Facebook, Google) + PSD

  1. Mak sagt:

    Great stuff! These buttons come in handy if you're dealing with a touch interface and thus require lager buttons to tap on :)

  2. Simon sagt:

    Yahoo would be complete this. Could you to a yahoo sign in button? it would be great :)

  3. wolfgang sagt:

    Wirklich gelungen. Ich werde es bei meinem nächsten Projekt ausprobieren. Jetzt muss ich mich nur noch durch die Beschreibung arbeiten.

  4. Lucy sagt:

    And just in case this helps anyone else, here's the CSS I used (not that you couldn't do it on your own, just that you shouldn't have to do it again if someone else already has…):
    a.button {
    width: 251px;
    display: inline-block;
    a.button.facebook {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -1px;
    a.button.facebook:hover {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -44px;
    a.button.facebook:active {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -87px;
    a.button.twitter {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -130px;
    a.button.twitter:hover {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -173px;
    a.button.twitter:active {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -216px;
    a.button.google {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -259px;
    a.button.google:hover {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -302px;
    a.button.google:active {
    background: url('awesome_button_image_from_Chris.png') no-repeat -2px -345px;

  5. Uli Thiel sagt:

    Vielen Dank, Christian, ich hab die PSD downgeloaded für meine Sammlung.

  6. Ravi Shekhar sagt:

    Thankyou so much for the login buttons. Have used it in one of my projects, and they are awesome.

  7. Thanks for sharing these buttons, these are the best I've seen.

  8. These buttons are awesome, thanks for sharing these!

  9. Pascal sagt:


    thanks so much – they come in pretty handy right now ;-)

    I'd really appreciate the LinkedIn one. Do you, by any chance, have that one too?

    Thanks again!

  10. Walde sagt:

    Die eigene Sammlung an Buttons kann nicht groß genug sein. Aauch von mir ein großes Dankeschön!

Hinterlasse einen Kommentar zu Klammer Porsche Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>