Boutons html

Fermé

Pr.Witherfire - 12 mars 2023 à 12:35
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 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

A voir également:

Boutons html
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
/Var/www/html/index.html ✓ - Forum Linux / Unix
&Nbsp html ✓ - Forum Webmastering
[HTML] -   á et les autres - Forum HTML

1 réponse

Réponse 1 / 1

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 517
3 avril 2023 à 19:34

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

&nbsp ; Quelle Fonction ?

Espace en HTML

la balise ou

Image cliquable dans html

ou ou

Discussions similaires

Newsletters