<div class="radikalwp-f-social"><button class="radikalwp-f-social-g">ادامه با گوگل<//button><button class="radikalwp-f-social-h">ادامه با گیت‌هاب<//button><div class="radikalwp-f-social-div"><span>یا با ایمیل<//span><//div><input type="email" placeholder="ایمیل"><button class="radikalwp-f-social-submit">ادامه<//button><//div>

.radikalwp-f-social {
  width: 280px;
  padding: 22px;
  font-family: inherit;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.radikalwp-f-social button { width: 100%; padding: 10px; font-family: inherit; font-size: 13.5px; font-weight: 700; border-radius: 10px; cursor: pointer; transition: all .3s ease; }
.radikalwp-f-social-g { margin-bottom: 10px; color: #334155; background: #fff; border: 1.5px solid #e2e8f0; }
.radikalwp-f-social-g:hover { border-color: #94a3b8; }
.radikalwp-f-social-h { margin-bottom: 16px; color: #fff; background: #24292f; border: none; }
.radikalwp-f-social-h:hover { background: #32383f; }
.radikalwp-f-social-div { position: relative; text-align: center; margin-bottom: 16px; }
.radikalwp-f-social-div::before { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #e2e8f0; }
.radikalwp-f-social-div span { position: relative; font-size: 11px; color: #94a3b8; background: #fff; padding: 0 12px; }
.radikalwp-f-social input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
}
.radikalwp-f-social input:focus { border-color: #6366f1; background: #fff; }
.radikalwp-f-social-submit { color: #fff; background: #4f46e5; border: none; }
.radikalwp-f-social-submit:hover { background: #4338ca; }