Boutons html

Pr.Witherfire -
txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention - 3 avril 2023 à 19:34

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

Afficher la suite

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

Réponse 1 / 1

txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention 521

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 !

Discussions similaires

Votre réponse

Discussions similaires