Exemple de styler deux boutons violets en utilisant l'élément <span> |CSS Snippets|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        background: #560059;
        color: #eeeeee;
        font-family: Arial;
        font-size: 16px;
      }
      .wrapper {
        margin: 80px auto;
        text-align: center;
        width: 100%;
        position: relative;
      }
      .button {
        padding: 15px 100px;
        margin: 10px 4px;
        color: #eee;
        font-family: sans-serif;
        text-transform: uppercase;
        text-align: center;
        position: relative;
        text-decoration: none;
        display: inline-block;
        border: 1px solid;
      }
      .button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        z-index: -1;
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
        transition: all 0.4s;
      }
      .button:hover {
        color: #b414ba;
      }
      .button:hover::before {
        opacity: 1;
        background-color: #f7c2f9;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        transition: -webkit-transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity 0.4s;
        transition: transform 0.6s cubic-bezier(0.08, 0.35, 0.13, 1.02), opacity;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <span class="button">Bouton 1</span>
      <span class="button">Bouton 2</span>
    </div>
  </body>
</html>