Je crée une application pour appareil tactile. Je dois créer un bouton de connexion comme indiqué dans l'image entrez la description de l'image ici

J'ai créé moi-même la partie restante. Je ne parviens pas à créer le style du bouton LOGIN

0
msm0204 20 avril 2017 à 05:57

3 réponses

Meilleure réponse

Voici un exemple. Vous pouvez facilement modifier le css selon vos besoins:

.btn-login {
  padding: 10px 30px;
  color: #333;
  border: 1px solid #333;
  background: #fff;
  border-radius: 20px;
  transition: all ease-in-out 0.3s;
}

.btn-login:hover {
  border-color: #fff;
  background: #666;
  color: #fff;
}
<p><a class="btn-login">LOGIN</a></p>
2
Sébastien Gicquel 20 avril 2017 à 08:03

J'y ai également ajouté des effets de survol. Voici le CSS pour ce bouton,

.log-in {
  text-transform: uppercase;
  padding: 10px;
  width: 100px;
  height: 40px;
  color: #888;
  border: 1px solid #888;
  background: #fff;
  border-radius: 30px;
  line-height: 20px;
  transition: all ease-in-out 0.3s;
}
.log-in:hover {
  background: #4f8be1;
  color: #fff;
  border-color: #fff;
}

J'espère que cela fonctionnera pour vous, voici le code sur codepen.io

Bouton de connexion CSS simple et propre @vkubre CodePen
1
kubre 20 avril 2017 à 03:10

Mes amis, je suppose que vous pourriez ressembler à quelque chose comme ça:

    // demos:
0
jackdon 20 avril 2017 à 03:10