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

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

askfmaskfaosflas

Потрачен
Автор темы
1,089
511
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
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

Известный
977
477
там спиздить ведь можно, ты че
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>
 
Статус
В этой теме нельзя размещать новые ответы.