Дрожащий текст с переходами CSS

Я попытался создать эффект пульсации при наведении на кнопку с помощью кнопки, единственная проблема, с которой я сталкиваюсь, заключается в том, что текст дрожит/трепещет, когда я навис над ним, я хочу, чтобы он оставался неподвижным плавный переход. Любые идеи о том, как остановить это?Дрожащий текст с переходами CSS

a { 
 
    display: block; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 50px; 
 
    background: rgba(0, 0, 255, .2); 
 
    text-decoration: none; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    margin: 10% auto; 
 
} 
 
p, 
 
span:first-of-type, 
 
span:last-of-type { 
 
    position: absolute; 
 
    margin: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 0; 
 
    height: 0; 
 
    border-radius: 50%; 
 
    transition: all .3s; 
 
} 
 
span:first-of-type { 
 
    transition-delay: .1s; 
 
    z-index: 1; 
 
} 
 
span:last-of-type { 
 
    transition-delay: .2s; 
 
    z-index: 2; 
 
} 
 
span.cta { 
 
    color: #33C; 
 
    text-transform: uppercase; 
 
    font-family: Arial; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 300px; 
 
    display: block; 
 
    transition: color .3s; 
 
    z-index: 3; 
 
} 
 
a:hover p, 
 
a:hover span:first-of-type, 
 
a:hover span:last-of-type { 
 
    width: 110%; 
 
    height: 660%; 
 
    border-radius: 50%; 
 
    background: rgba(0, 0, 255, .2); 
 
} 
 
a:hover span:first-of-type, 
 
a:hover span:last-of-type { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
a:hover p span { 
 
    color: #FFF; 
 
}

<a href="#"> 
 
    <p> 
 
    <span></span> 
 
    <span class="cta">Shop the Trend</span> 
 
    <span></span> 
 
    </p> 
 
</a>

нотабене Это нормально в IE11, это происходит в любом другом браузере.

источник

2016-01-20 iWayno

Почему вы не используете что-то вроде materializecss? –

Здесь вы идете ... Изменен HTML [добавленный текст кнопки внутри сНу и применяется новый класс "textCta" к нему]

<span class="cta"><div class="textCta">Shop the Trend</div></span>

CSS

.textCta { 
    color:#33C; 
    text-transform:uppercase; 
    font-family:Arial; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    width: 300px; 
    display: block; 
    transition: color .3s; 
    z-index: 3; 
}

Demo

источник

2016-01-20 09:51:01 Nofi

Удалив теги p и помещая фактический текст в div, мне удалось остановить дрожь и сохранить фоновый эффект одинаково.

Благодаря Nofi за их помощью.

<a href="#"> 
    <span></span> 
    <div class="cta">Shop the Trend</div> 
    <span></span> 
</a>

источник

2016-01-20 10:17:06 iWayno

Дрожащий текст с переходами CSS

ответ

Смежные вопросы