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

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

askfmaskfaosflas

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

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