Boutons html
Pr.Witherfire
-
txiki Messages postés 6819 Statut Contributeur -
txiki Messages postés 6819 Statut Contributeur -
Bonjour. J'ai un code html avec des animations sur des boutons.
<head>
<title>InfynytyProject</title>
<style = "text/css">
body{
background-color : 0080FF;
}
.container {
position: absolute;
top: 10%;
}
.button {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #0080FF;
font-weight: 600;
font-size: 15px;
background-color: #FFFFFF;
padding: 15px 50px;
margin: 0 auto;
}
.Title {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #0080FF;
font-weight: 600;
font-size: 25px;
background-color: #FFFFFF;
padding: 15px 50px;
margin: 0 auto;
}
.button span {
position: relative;
z-index: 1;
}
.button:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 470%;
width: 140%;
background: #0080FF;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
transform: translateX(-100%) translateY(-25%) rotate(45deg);
}
.button:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.Invisible{color:0080FF;}
.button {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #0080FF;
font-weight: 600;
font-size: 15px;
background-color: #FFFFFF;
padding: 15px 50px;
margin: 0 auto;
}
.button span {
position: relative;
z-index: 1;
}
.butt:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 470%;
width: 140%;
background: #0080FF;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
transform: translateX(-100%) translateY(-25%) rotate(45deg);
}
.button:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
menu, ul {
display: flex;
list-style: none;
padding: 0;
width: 1600px;
background:#FFFFFF;
}
li {
flex-grow: 1;
}
</style>
</head>
<body>
<menu>
<FONT face="Impact">
<li><H1 class = Title>InfynytyProject</H1></li>
</FONT>
<li><button class=button onclick="copy()">1</button></li>
<li><button class=button onclick="window.location.href='https://infynytyproject.000webhostapp.com/Pc/Studios.html';">2</button></li>
<li><button class=button onclick="paste()">3</button></li>
</menu>
</body>
J'aimerais qu'avant le survole du bouton, il soit totalement blanc. Merci d'avance
A voir également:
- Boutons html
- Editeur html - Télécharger - HTML
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Comment réinitialiser un téléphone avec les boutons - Guide
- Application pour reconnaître les boutons - Accueil - Outils
- Espace en html ✓ - Forum HTML
1 réponse
Salut
Tout ce qui est après " body{ " c'est du CSS comme indiqué ici : <style = "text/css"> qui est du html. Ce qui fait que ton code css s'affiche en noir et c'est pas très plaisant à suivre pour une aide éventuelle.
Extrait html ci-dessous :
<style = "text/css">
Extrait CSS ci-dessous:
body{
background-color : 0080FF;
}
.container {
position: absolute;
top: 10%;
}
"des animations sur des boutons" : Ton site est en ligne pour qu'on voit un peu ton problème ?
Cdlt !
