Css анимация раскрыть содержимое кнопки
как я могу создать такую анимацию кнопки с помощью CSS?
Я хочу отображать только первую букву кнопки, а при наведении курсора она расширяется и показывает остальные буквы.
может быть что-то вроде:
<button>h<span>ello</span></button>
и css:
button {
width: 40px;
height: 40px;
border-radius: 50%;
}
button span {
display: none: /* maybe hide it first? */
}
но когда я меняю ширину, он выглядит как растянутый круг из-за радиуса. Как лучше всего изменить ширину, но сохранить тот же радиус границы?
Спасибо,
А.
Ответы 4
Во-первых, вы не должны использовать border-radius из 50%, который будет делать овал, когда ширина больше его высоты, вы должны использовать фиксированное значение, например 30px.
Во-вторых, не стоит исправлять height и width, нужно настроить padding, чтобы текст не выходил за пределы кнопки.
В-третьих, чтобы изменить содержимое, вы можете использовать свойство content.
В коде я использовал :after, который добавляет «ello» после «H» на :hover.
button {
padding: 15px;
border-radius: 30px;
}
button:hover:after {
content: "ello";
}<button>H</button>Извините, если я использую: after, как я могу использовать переходы css, чтобы сделать его плавным?
Вместо использования вложенного <span> я рекомендую использовать :after CSS-селектор, чтобы показать остальную часть метки кнопки. Вы захотите использовать CSS3 переходы для плавной анимации наведения. Я объединил селектор :after с переходом и непрозрачность :hover, равную 1, чтобы текст кнопки появлялся одновременно с расширением кнопки.
button {
width: 50px;
height: 50px;
border-radius: 10px;
padding:6px;
background-color:black;
color:white;
font-size:1.03em;
box-shadow:3px 3px red;
}
button:hover {
width:100px;
height:50px;
border-radius: 10px;
padding:6px;
background-color:black;
color:white;
transition:all 0.4s ease 0s;
font-size:1.02em;
box-shadow:3px 3px blue;
}
button span {
opacity: 0;
}
button:hover span {
opacity: 1;
transition: all 0.3s ease 0s;
}
button:hover span:after {
content:"ello!";
}<button>H<span></span></button>Спасибо, Таннер за помощь, крутой сниппет, собираюсь его украсть :)
Здравствуйте, ваш пример действительно хорош, но я вижу небольшой скачок в первой букве, когда вы наводите на нее курсор, это из-за заполнения?
@Adbullah H. нет, манекен, это потому, что выравнивание текста, если я выровняю его по левому краю и играю с отступом, это выглядит красиво :)
Я вижу, вы изменили ширину с 50 до 100 пикселей, но что, если текст в кнопке динамический, я бы не узнал длину текста. .
Вы можете определить значение border-radius в px, em или rem. Использование % создаст эллипс.
Вы можете избежать дополнительной разметки, используя атрибут ::first-letter.
Пример...
button {
background: black;
color: transparent;
font-size: 3rem;
border: 0;
border-radius: 2.5rem;
width: 5rem;
height: 5rem;
padding: .5rem 1.5rem;
}
button::first-letter {
color: white;
}
button:hover {
width: auto;
color: white;
}<button>Hello</button>Спасибо за понимание !, я не знал об этом селекторе, TIL.
Простое использование тега: hover ниже /
CSS:
.button {
background-color: pink;
}
.button:hover {
background-color: blue;
}
HTML:
<h3 class = "button"> Hello, World! </h3>
Похоже, мне еще многому нужно научиться :) Спасибо за помощь!