Moin,
auch wenn es sich nicht zu 100 % um PHP dreht, denke ich, dass hier einige Leute mit Erfahrung in diesem Bereich sind
Nun, ich habe ein Formular erstellt und würde gerne dieses per animierten Button, über POST weitergeben.
Jetzt habe ich dass Problem, dass mir die Animation nicht angezeigt wird, warum auch immer ...
Ich hoffe einer von Euch kann mir bei diesem kleinen Problem weiterhelfen:
HTML:
CSS:
auch wenn es sich nicht zu 100 % um PHP dreht, denke ich, dass hier einige Leute mit Erfahrung in diesem Bereich sind
Nun, ich habe ein Formular erstellt und würde gerne dieses per animierten Button, über POST weitergeben.
Jetzt habe ich dass Problem, dass mir die Animation nicht angezeigt wird, warum auch immer ...
Ich hoffe einer von Euch kann mir bei diesem kleinen Problem weiterhelfen:
HTML:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="std_box">
<div id="bild">
<img class="Privat" src="Privat"><br>
</div><hr><br>
<div id="anmeldung">
<form action="datenbank.php" method="post">
<input placeholder="Benutzername" type="text" name="user"><br>
<input placeholder="Passwort" type="password" name="pw"><br><br>
<input type="submit" value="Login" class="animated-button victoria-two">
</form>
</div>
</div>
</body>
</html>
Code:
@charset=utf-8;
hr
{
width: 100%;
float: left;
display:block;
border:none;
color:white;
height:1px;
background:black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
#std_box
{
margin: auto;
width: 60%;
padding: 10px;
}
#bild
{
margin: auto;
width: 60%;
padding: 10px;
}
#anmeldung
{
text-align: center;
margin: auto;
width: 60%;
padding: 10px;
}
/* Global Button Styles */
input.animated-button:link, input.animated-button:visited {
position: relative;
display: block;
margin: 10px auto 0;
padding: 10px 10px;
color: black;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
input.animated-button:link:after, input.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
input.animated-button:link:hover, input.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
input.animated-button:link:hover:after, input.animated-button:visited:hover:after {
height: 450%;
}
input.animated-button:link, input.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: black;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* Victoria Buttons */
input.animated-button.victoria-two {
border: none;
}
input.animated-button.victoria-two:after {
background: #005BAA;
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
