Effet de survol du bouton d'action d'appel

1608 ledoc

Ouvrir dans l'éditeur Publiez votre code

Effet de survol du bouton d'action d'appel

Recommandé

9 September 2024

Un code par alejandrokundrah

HTML

CSS

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff9c1;
}

.navbar {
  position: relative;
  height: 100px;
  min-width: 400px;
  padding-left: 35px;
  padding-right: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0 10px 20px rgba(82, 74, 74, 0.3);
}

.navbar:after {
  content: "";
  position: absolute;
  bottom: 7px;
  height: 4px;
  width: 35%;
  left: 50%;
  transform: translateX(-50%);
  background-color: gray;
  opacity: 0.3;
}

.circle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100px - 40px);
  margin-bottom: 0;
  height: 80px;
  width: 80px;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #ff5e00;
  z-index: 9;
  box-shadow: 0 5px 5px rgba(255, 147, 85, 0.35);
  transition: height 0.3s;
}

.circle:hover {
  height: 270px;
  border-radius: 50px;
}

.circle .plus-icon {
  color: white;
  font-size: 27px;
  transition: opacity 0.3s, transform 0.2s;
}

.circle:hover .plus-icon {
  transform: rotate(360deg);
  opacity: 0;
}

.circle .social {
  position: absolute;
  top: 195px;
  color: white;
  background-color: rgba(255, 212, 212, 0.308);
  height: 60px;
  width: 60px;
  margin-bottom: 5px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  cursor: pointer;
}

.circle .social:nth-child(2) {
  opacity: 0;
  transition: opacity 0.3s, top 0.5s ease;
}

.circle .social:nth-child(3) {
  opacity: 0;
  transition: opacity 0.3s, top 0.5s 0.1s ease;
}

.circle .social:nth-child(4) {
  opacity: 0;
  transition: opacity 0.3s, top 0.5s 0.22s ease;
  margin-bottom: 0px;
}

.circle:hover .social:nth-child(2) {
  opacity: 1;
  top: 5px;
}

.circle:hover .social:nth-child(3) {
  opacity: 1;
  top: calc(5px + 60px + 5px);
}

.circle:hover .social:nth-child(4) {
  opacity: 1;
  top: calc(5px + 60px + 5px + 60px + 5px);
}

.circleBackground {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100px - 100px / 2);
  margin-bottom: 0;
  height: calc(80px + 20px);
  width: calc(80px + 20px);
  border-radius: calc(100px / 2);
  background-color: #7f0a0a;
}

.icon-home,
.icon-settings {
  font-size: 29px;
  color: #7f0a0a;
  
}

Effet de survol du bouton d'action d'appel

Recommandé

Boutons lumineux CSS

Effet de survol de bouton CSS

Un code par alejandrokundrah

HTML

CSS

JS

Recommandé

Boutons lumineux CSS

Effet de survol de bouton CSS

Un code par alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS