Как лучше всего сделать такую кнопку?

287
14 июня 2022, 14:30

Есть два варианта такой кнопки (для десктоп и мобайл):

  1. Только текст "Ответить на 7 вопросов" кликабелен (для десктоп)
  2. Вся кнопка кликабельна вместе с "2 минуты" (для мобайл)

Если во втором варианте для мобайл можно картинкой всю кнопку поставить, то как лучше сделать такую кнопку в первом варианте? Может с помощью position? Учитывая то, что эта кнопка для экранов от 1920 до 998

И самый главный вопрос: Как вообще и с помощью чего лучше всего делать такие кнопки к которым прикреплены другие элементы и ещё в которых текст с имг?

Answer 1

Честно говоря, как вам лучше\удобнее, так и делайте.

Лично я использовал вообще другой вариант, где "2 минуты" не кликабельно при помощи pointer-events, и позиционировал бы эту кнопку через position: absolute.

И у меня получился бы вот такой вариант:

.button {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 40px);
  border-radius: 10px;
  border-bottom: 5px solid #0456b6;
  background: #005fcf;
  color: #fff;
  padding: 10px 70px 10px 20px;
  margin-top: 40px;
  margin-right: 40px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 25px 5px rgba(255,255,255,.2) inset;
}
.button .-icon {
  display: flex;
  flex: 1 0 auto;
  width: 50px;
  height: 50px;
  background: url('//i.imgur.com/LUnKrwb.png') no-repeat center center / contain;
  margin-right: 20px;
}
.button .-text {
  
}
.button .-text .-title {
  display: inline-flex;
  border-bottom: 1px solid #fff;
  margin-bottom: 3px;
  box-sizing: border-box;
  font-size: 125%;
}
.button .-extra {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  max-width: 100%;
  height: 80px;
  border-radius: 20px;
  background: #010d1b;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  right: -40px;
  top: -40px;
}
.button .-extra .-num {
  font-size: 30px;
  line-height: 1.15;
}
<div class="button">
  <div class="-icon"></div>
  <div class="-text">
    <div class="-title">Ответить на 7 вопросов</div>
    <div class="-des">отправим предложение с 3мя вариантами разработки</div>
  </div>
  <div class="-extra">
    <div class="-num">2</div>
    <div class="-cou">минуты</div>
  </div>
</div>

READ ALSO
CMS для интернет-магазина, в которую легко дабавить свой HTML/CSS

CMS для интернет-магазина, в которую легко дабавить свой HTML/CSS

Есть готовый макет интернет-магазина на HTML/CSSПытался реализовать его на WordPress, однако я не знаю, как создать там свою тему, нет навыков работы...

333
Помогите разобраться с выводом результатов php

Помогите разобраться с выводом результатов php

На сайте есть цикл вывода статей из-записейНе могу разобраться почему цикл выводит только 9 статей (всего статей 15) Как это можно настроить

206
Как создать данную таблицу Html со стилями? [закрыт]

Как создать данную таблицу Html со стилями? [закрыт]

Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопросПожалуйста,...

281
Генерация значений selectpicker из struct

Генерация значений selectpicker из struct

Есть вот такой код, который должен выводить список групп для выбораЗначения Group заполняются из mysql (вывод в консоль есть)

250