Кнопка с полупрозрачным градиентом. Не могу правильно задать стиль.

[Yserty]

Доброго времени суток, уважаемые форумчане. 

Я не смог довести до ума градиент, что имеется перед кнопкой "Читать далее...", который визуально показывает наличие других статей. Сейчас он в ширину надписи, а должен быть полностью по ширине блока и надпись "Читать далее..." впритык, а необходим отступ. 
С этими плавающими блоками у меня беда, в основном я подчёркиваю реализацию на других ресурсах, но таких конструкций я встречал мало, и попытки адаптации вы можете сейчас наблюдать :-( Помогите пожалуйста. 

Страницу с макетом прикрепил, в этом единственном файле и стили и js код.

567.html

[Sergey_net_it]

Наверное уже не актуально, но я отвечу

У блока read_next2 убери свойство display:inline

http://joxi.ru/bmoGaDhxxL0amy

 

 

[Yserty]

5 минут назад, Sergey_net_it сказал:

Наверное уже не актуально, но я отвечу

У блока read_next2 убери свойство display:inline

http://joxi.ru/bmoGaDhxxL0amy

 

Очень даже актуально, но это решение не подходит по причине того, что после этого кнопка с градиентом съезжает далеко вниз, и по сути смысл теряется её... должен быть небольшой отступ. 

Я даже картинку нарисовал, как должно быть. 

[snowjotunn]

<div> с классом read-next2 который оборачивал ссылку "read more..." можешь удалить, он не нужен. А к <div> с классом ta2 добавь в стиль position: relative;

И добавь следующий стиль

.ta2:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 100%);
}

 

[Sergey_net_it]

Вот реализация https://jsfiddle.net/u0t72dgh/2/

Наверное Вы размещали. По дизайну и классам вообще одинаковый

Edited February 14, 2017 by Sergey_net_it