Есть два варианта такой кнопки (для десктоп и мобайл):
Если во втором варианте для мобайл можно картинкой всю кнопку поставить, то как лучше сделать такую кнопку в первом варианте? Может с помощью position? Учитывая то, что эта кнопка для экранов от 1920 до 998
И самый главный вопрос: Как вообще и с помощью чего лучше всего делать такие кнопки к которым прикреплены другие элементы и ещё в которых текст с имг?
Честно говоря, как вам лучше\удобнее, так и делайте.
Лично я использовал вообще другой вариант, где "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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть готовый макет интернет-магазина на HTML/CSSПытался реализовать его на WordPress, однако я не знаю, как создать там свою тему, нет навыков работы...
На сайте есть цикл вывода статей из-записейНе могу разобраться почему цикл выводит только 9 статей (всего статей 15) Как это можно настроить
Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопросПожалуйста,...
Есть вот такой код, который должен выводить список групп для выбораЗначения Group заполняются из mysql (вывод в консоль есть)