HTML Design | Как сделать такую кнопку?

Статус
В этой теме нельзя размещать новые ответы.

влад динозавр

Известный
Автор темы
1,296
615
1659039280336.png

при наведении есть эффект
1659039291810.png



 
Решение
там спиздить ведь можно, ты че
CSS:
button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:50px;
  font-size:1.6em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 10px 0px 10px 0px;
}
button:hover{
  background:#34495E;
  color:#1AAB8A;
  box-shadow: 0 0 30px #101010;
  border-radius: 0px;
}
button:before,button:after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}
HTML:
<button type="submit"...

yung milonov

Известный
1,023
528
там спиздить ведь можно, ты че
CSS:
button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:50px;
  font-size:1.6em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  border-radius: 10px 0px 10px 0px;
}
button:hover{
  background:#34495E;
  color:#1AAB8A;
  box-shadow: 0 0 30px #101010;
  border-radius: 0px;
}
button:before,button:after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}
HTML:
<button type="submit" name="Unprot">Unprot</button>
 
Статус
В этой теме нельзя размещать новые ответы.