Pulsante di chiamata azione effetto passaggio del mouse

1897 ledoc

Apri nell'Editor Video Pubblica il Tuo Codice

Pulsante di chiamata azione effetto passaggio del mouse

Consigliato

7 November 2024

Modulo di accesso HTML con sfondo geometrico

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;
  
}

Pulsante di chiamata azione effetto passaggio del mouse

Consigliato

Disposizione delle colonne

Un codice di programmationant

Modulo di accesso HTML con sfondo geometrico

HTML

CSS

JS

Consigliato

Disposizione delle colonne

Un codice di programmationant

Modulo di accesso HTML con sfondo geometrico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS