• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button Effekt

Echotech

Neues Mitglied
Hallo alle zusammen!

Ich wollte fragen wie man einen Button erstellen kann von dem in periodischen zeitabständen ein rin weggeht?

Hier eine Seite zur Veranschaulichung:
http://www.drugtreatment.com/

Habe bis jetzt nichts im Internet gefunden.

Mit freundlichen Grüßen

Echotech
 
Werbung:
Werbung:
Sorry Ja ich meinte Ring.
Und das habe ich schon gemacht nur leider verstehe ich es nicht.

Gut, dann hier das CSS Snippet dass du mit oben erwähnter Methode finden könntest:

Code:
.next-ring {
border: 3px
solid #fff;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
height: 90px;
width: 90px;
line-height: 110px;
top: 50%;
z-index: 19;
margin-top: -55px;
right: 47px;
position: absolute;
-webkit-animation: pulsate 3s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
-moz-animation: pulsate 3s ease-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 2s;
animation: pulsate 3s ease-out;
animation-iteration-count: infinite;
animation-delay: 2s;
opacity: 0.0;
}
 
Ergänzung zu @scbawik: Dieser Schnipsel ist in dem Zusammenhang auch noch interessant:
Code:
@-webkit-keyframes
pulsate {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }

    12% {
        opacity: .5
    }

    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}
 
Ergänzung zu @scbawik: Dieser Schnipsel ist in dem Zusammenhang auch noch interessant:
Code:
@-webkit-keyframes
pulsate {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }

    12% {
        opacity: .5
    }

    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}

Stimmt, übersehen. Danke.
 
Werbung:
Danke für eure Hilfe!:D
Ich schaffe es nur nicht es zum laufen zu bringen
Hier die Zwei Codes:
HTML:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF-8>
            <title>New Button</title>
            <style>
                input[type="submit"]{
                    border:4px solid rgb(255,96,80);
                    background-color:red;
                    border-radius:30px;
                    color: white;
                    width:60px;
                    height:60px;
                    font-size:40px;
                }
            </style>
        </head>
        <body>
            <form action="#">
                <input type="submit" value=">">
            </form>
            <a class="next" href="#next" style="opacity: 0.5;">Next</a>
                <span class="next-ring"></span>
        </body>
    </html>
Der Css Teil:
Code:
.next-ring {
border: 3px
solid #fff;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
height: 90px;
width: 90px;
line-height: 110px;
top: 50%;
z-index: 19;
margin-top: -55px;
right: 47px;
position: absolute;
-webkit-animation: pulsate 3s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
-moz-animation: pulsate 3s ease-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 2s;
animation: pulsate 3s ease-out;
animation-iteration-count: infinite;
animation-delay: 2s;
opacity: 0.0;
}

@-webkit-keyframes
pulsate {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }
    12% {
        opacity: .5
    }
    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}
Mir felt einfach der fehler nicht auf. Vieleicht Findet ihr ihn ja:)
 
Hast du den CSS Teil in einer css datei oder im Style Tag im HTML Teil mit drin. Wenn du es in einer CSS Datei hast, musst du diese natürlich noch einfügen im HTML teil

<link rel="stylesheet" href="...PFAD ZUR CSS DATEI">
 
Danke für eure Hilfe!:D
Ich schaffe es nur nicht es zum laufen zu bringen
Hier die Zwei Codes:
HTML:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF-8>
            <title>New Button</title>
            <style>
                input[type="submit"]{
                    border:4px solid rgb(255,96,80);
                    background-color:red;
                    border-radius:30px;
                    color: white;
                    width:60px;
                    height:60px;
                    font-size:40px;
                }
            </style>
        </head>
        <body>
            <form action="#">
                <input type="submit" value=">">
            </form>
            <a class="next" href="#next" style="opacity: 0.5;">Next</a>
                <span class="next-ring"></span>
        </body>
    </html>
Der Css Teil:
Code:
.next-ring {
border: 3px
solid #fff;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
height: 90px;
width: 90px;
line-height: 110px;
top: 50%;
z-index: 19;
margin-top: -55px;
right: 47px;
position: absolute;
-webkit-animation: pulsate 3s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
-moz-animation: pulsate 3s ease-out;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 2s;
animation: pulsate 3s ease-out;
animation-iteration-count: infinite;
animation-delay: 2s;
opacity: 0.0;
}

@-webkit-keyframes
pulsate {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }
    12% {
        opacity: .5
    }
    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}
Mir felt einfach der fehler nicht auf. Vieleicht Findet ihr ihn ja:)

Ich bezweifle dass das wie gewünscht funktioniert, wenn man den Code 1 zu 1 stiehlt.
 
Werbung:
Danke an B3nnoX an so was einfaches habe ich nicht gedacht Danke :D
Und ich möchte es nicht stehlen nur wenn es so funktioniert wie von euch angegeben kann ich es analysieren und davon lernen. Wenn es aber nicht Funktioniert und ich es vorher schon versuche mir zu Merken merke ich es mir falsch und kapiere es wahrscheinlich garnicht mehr.
Aber sorry wenn es dich stört das ich es für private zwecke kopiere lasse ich es:)
 
Danke an B3nnoX an so was einfaches habe ich nicht gedacht Danke :D
Und ich möchte es nicht stehlen nur wenn es so funktioniert wie von euch angegeben kann ich es analysieren und davon lernen. Wenn es aber nicht Funktioniert und ich es vorher schon versuche mir zu Merken merke ich es mir falsch und kapiere es wahrscheinlich garnicht mehr.
Aber sorry wenn es dich stört das ich es für private zwecke kopiere lasse ich es:)

Ne, ist mir doch egal.

Ich meine nur, dass der Code funktioniert ist ja sowieso klar. Hat man ja auf der Website gesehen.

Dass du aber nicht einmal die Positionsangaben verändert hast (bzw. rausgenommen), lässt mich nunmal vermuten dass du der Meinung bist man kann Codes einfach irgendwo rausnehmen und alles funktioniert. Auch dass du die Klasse weiterhin .next-ring nennst, obwohl es eher ein .submit-ring wäre, stärkt meine Vermutungen nur.
 
Ja ok darauf habe ich vergessen.
Ich werde es sofort versuchen anzupassen und dan die vieleicht sogar funktionierende version hochlade:D
 
Werbung:
Habe jetzt versucht alle daten soweit ich wusste was sie machen anzupassen.
CSS Teil:
Code:
#kreis {
    background-color: yellow;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 100px;
    left: 250px;
    border: 1px solid black;
    text-align: center;
    border-radius: 100px;
}

#kreis-ring {
    border: 3px;       
    -webkit-border-radius: 90px;
    -moz-bord er-radius: 90px;
    border-radius: 4px;
    height: 60px;
    width: 60px;
    line-height: 80px;
    top: 50%;
    z-index: 19;
    right: 47px;
    position: absolute;
    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -moz-animation: pulsate 3s ease-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 2s;
    animation: pulsate 3s ease-out;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    opacity: 0.0;
}

@-webkit-keyframes
pulsate {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }
    12% {
        opacity: .5
    }
    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}

HTML Teil:
HTML:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF-8>
            <title>New Button</title>
            <link href="Test Button.css" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div id="kreis">
                <a class="kreis" href="#next" style="opacity: 0.5;"></a>
                <p>></p>
                <span class="kreis-ring"></span>
            </div>
        </body>
    </html>
 
Habe jetzt versucht alle daten soweit ich wusste was sie machen anzupassen.
CSS Teil:
Code:
#kreis {
    background-color: yellow;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 100px;
    left: 250px;
    border: 1px solid black;
    text-align: center;
    border-radius: 100px;
}

#kreis-ring {
    border: 3px;   
    -webkit-border-radius: 90px;
    -moz-bord er-radius: 90px;
    border-radius: 4px;
    height: 60px;
    width: 60px;
    line-height: 80px;
    top: 50%;
    z-index: 19;
    right: 47px;
    position: absolute;
    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -moz-animation: pulsate 3s ease-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 2s;
    animation: pulsate 3s ease-out;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    opacity: 0.0;
}

@-webkit-keyframes
pulsate {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }
    12% {
        opacity: .5
    }
    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}

HTML Teil:
HTML:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF-8>
            <title>New Button</title>
            <link href="Test Button.css" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div id="kreis">
                <a class="kreis" href="#next" style="opacity: 0.5;"></a>
                <p>></p>
                <span class="kreis-ring"></span>
            </div>
        </body>
    </html>

Abgesehen von @thecain richtiger Aussage, dein Border hat keine Farbe.

Ob es auch funktioniert, den @-webkit-keyframes block erst nach allem anderen zu definieren, weiß ich nicht. Habe noch nie damit gearbeitet.
Es wäre für mich als Programmierer zumindest absolut unlogisch.
 
Zuletzt bearbeitet:
Werbung:
Hallo,
habe jetzt versucht so viel wie möglich zu lernen und den code dann überarbeitet.
wollte fragen ob jemand bitte drüber schauen kann ob er fehler findet.

html:
Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF-8>
            <title>New Button</title>
            <link href="Test Button.css" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div class="kreis">
                <p>></p>
            </div>
        </body>
    </html>

css:
Code:
.kreis {
    display:block;
    width:60px;
    height:60px;
    line-height:80px;
    border: 2px solid #f5f5f5;
    border-radius: 60px;
    color:black;
    background: yellow;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
    position: absolute;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
     -webkit-animation-name: 'pulsate';
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 2s;
       animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 2s;
}
p {
    margin-bottom: auto;
    margin-top: auto;
    text-align: center;
}

@-webkit-keyframes 'pulsate' {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }
    12% {
        opacity: .5
    }
    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}
Danke im Vorraus
MFG
echotech
 
Hallo,
habe jetzt versucht so viel wie möglich zu lernen und den code dann überarbeitet.
wollte fragen ob jemand bitte drüber schauen kann ob er fehler findet.

html:
Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF-8>
            <title>New Button</title>
            <link href="Test Button.css" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div class="kreis">
                <p>></p>
            </div>
        </body>
    </html>

css:
Code:
.kreis {
    display:block;
    width:60px;
    height:60px;
    line-height:80px;
    border: 2px solid #f5f5f5;
    border-radius: 60px;
    color:black;
    background: yellow;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
    position: absolute;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
     -webkit-animation-name: 'pulsate';
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 2s;
       animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 2s;
}
p {
    margin-bottom: auto;
    margin-top: auto;
    text-align: center;
}

@-webkit-keyframes 'pulsate' {
    0% {
        -webkit-transform: scale(0.9,0.9);
        -moz-transform: scale(0.9,0.9);
        -ms-transform: scale(0.9,0.9);
        transform: scale(0.9,0.9);
        opacity: 0.0
    }
    12% {
        opacity: .5
    }
    25% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0.0
    }
}
Danke im Vorraus
MFG
echotech

http://jsfiddle.net/f6WQE/

Und jetzt hör auf Sachen zu machen von denen du nicht die geringste Ahnung hast.
Wenn es schon an einer korrekten HTML-Syntax scheitert musst du nicht an css3 animations rumwerken.
Außerdem hat es vorher besser funktioniert als jetzt. Wenn du die Hälfte der CSS Angaben raus löscht, ohne zu wissen für was die da sind, ist das aber auch kein Wunder.

Schuster, bleib bei deinem Leisten!
 
Hey habe dazu auch noch eine Frage. Ich sitze gerade beim gleichen Problem und hab ganz vernünftig die Suchfunktion benutzt und bin nun hier gelandet. Ich bin mir eigentlich ziemlich sicher, dass mein Code richtig ist. Aber funktionieren tut es trotzdem nicht...

Ihr kennt von PacMan die kleinen Geister? Ich will einen davon von links nach rechts und wieder zurück wandern lassen, nur bleibt der Bursche einfach stehen und macht gar nichts...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>

@keyframes move {

from {left: 0px;}
to {right: 500px;}

}

@-webkit-keyframes move {

from {left: 0px;}
to {right: 500px;}

}


#Gost {

animation-name: move;
animation-duration: 10s;
animation-direction: alternate;
animation-iteration-count: infinite;
-webkit-animation-name: move;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;


}


</style>
</head>


<body>

<img id="Gost" src="pinky.png"/>

</body>
</html>
 
Werbung:
Die Eigenschaften left, bottom, top und right wirken nur auf nicht-statisch positionierte Elemente. Du müsstest #Ghost vermutlich noch die Eigenschaft

Code:
position: absolute;

geben.
 
Zurück
Oben