• CSS
  • Hover

Effets de survol de boutons

Simples mais efficaces.

Publié le : July 8, 2020
Mis à jour le : July 8, 2020

Quelques effets de survol faciles à récupérer et utiliser.

Styles généraux

Tous les boutons présents utilisent ces styles comme base en guise de « reset » :

N'oubliez pas de préfixer si besoin !

.btn {
  margin: 20px 0;
  padding: 12px 26px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: 20rem; /* 20px */
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: white;
  background-color: hotpink;
  transition: background-color 0.3s ease;
}

Ajout d'icône

.btn-icon {
  background-color: hotpink;
}
.btn-icon::before {
  content: url('~assets/svg/arrow-right-white.svg');
  position: absolute;
  width: 20px;
  top: 50%;
  right: 0;
  transform: translate(40px, -50%);
  transition: transform ease 0.3s;
}
.btn-icon:hover,
.btn-icon:focus {
  background-color: darkorchid;
}
.btn-icon:hover::before,
.btn-icon:focus::before {
  transform: translate(-10px, -50%);
}
.btn-icon > span {
  display: inline-block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}
.btn-icon:hover > span,
.btn-icon:focus > span {
  transform: translateX(-10px);
}

Double volet

.btn-rideau {
  border: 2px solid #10113a;
  color: #10113a;
  background-color: transparent;
  transition: color 0.3s ease;
}
.btn-rideau:hover {
  color: white;
}
.btn-rideau::before {
  background: hotpink;
}
.btn-rideau::after {
  background: darkorchid;
}
.btn-rideau::before,
.btn-rideau::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 100%;
  left: 0;
  z-index: -1;
  transition: transform 0.3s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.btn-rideau:hover::before,
.btn-rideau:hover::after,
.btn-rideau:focus::before,
.btn-rideau:focus::after {
  transform: translateY(100%);
}
.btn-rideau:hover::after,
.btn-rideau:focus::after {
  transition-delay: 0.175s;
}

Dégradé animé

.btn-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: GradientReverse 0.5s ease 1 normal forwards;
}
.btn-gradient:hover,
.btn-gradient:focus {
  animation: Gradient 0.5s ease 1 normal forwards;
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 100%;
  }
}
@keyframes GradientReverse {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Échelle non desctructrice

.btn-scale {
  overflow: visible;
  color: #10113a;
  background-color: transparent;
}
.btn-scale::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  border: 2px solid #10113a;
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.btn-scale:hover::after,
.btn-scale:focus::after {
  transform: scale(1.1);
}