Оформляем виджет в GetCourse

Стандартный виджет имеет следующий вид.

Нам это не подходит, по этому не много преобразим его.
Добавим эффект при наведение на кнопку, добавим скругление полей, выделение полей.

/*  поля для ввода */
input[type="text"] {
  border:1px #ccc solid; /* Бордер */
  background-color:#f0f0f0; /* Цвет поля */
  border-radius: 6px; /* Скругление полей */
}

input[type="text"]:hover {
  border:1px #b5b0ae solid; /* Цвет при наведение поля */
}

input[type="text"]:focus {
  background-color: #fff3ed; /* Цвет при нажатия на поле */
  outline: none;
}

/* Эффект для кнопки */
.f-btn{
    overflow: hidden;
    z-index: 1;
    position: relative;
    -webkit-transition: 0.8s ease-out;
    transition: 0.8s ease-out;
       
   }
 
    .f-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 130%;
    height: 0%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    border-right: 50px solid transparent;
    border-bottom: 80px solid #fff;
    -webkit-transition: 0.8s;
    transition: 0.8s;
    z-index: -1;
}    

    .f-btn:hover {
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    color: #000000 !important;
    z-index: 8;
}
    .f-btn:hover:before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

Добавим следующий ccs код в стили, в подробные настройки.

Напишите мне и я помогу вам реализовать вашу задачу любой сложности в вашем проекте

TELEGRAM: https://t.me/sergeyget