2

Как можно сделать подобную кнопку, но без привязки к каким-то "с потолка взятым значениям"? margin-left в данном примере я брал на глаз. Но если изменится текст, то все полетит. Возможно у кого-то есть реализация подобного в лучшем виде. Если поделитесь - буду очень благодарен.

body {
    display: flex;
    justify-content: center;
}

.btn {
    font-size: 30px;
    text-decoration: none;
    color: white;
    background-color: red;
    padding: 15px;
    border-radius: 10px;
}

.btn::after {
    padding-left: 10px;
    content: attr(aria-label);
    margin-left: -180px;
    visibility: hidden;
}

.btn:hover::after {
    margin-left: 0;
    visibility: visible;
    transition: all 0.5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <a href="#" class="btn" aria-label="Change theme">[T]</a>
</body>
</html>

2
  • Мало информации, исходя из вопроса можно сделать через min-width и min-height
    – Arcadiy
    17 фев в 4:15
  • Вообще, если вам нужно вручную прописывать значения для каждого отдельного элемента с немного отличающимися пропорциями, значит вы плохо написали стили, перепишите их, попробуйте другой подход.
    – ΝNL993
    17 фев в 7:37

1 ответ 1

1

"Вижу цель, не вижу препятствий..." Можно менять текст и шрифт:

/* For example only --> */ body{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;gap:4px;background-color:grey}

.btn {
  position: relative;
  height: 2em;
  max-width: min-content;
  padding: .5em;
  border-radius: 0.33em;
  box-sizing: border-box;
  overflow: hidden;
  font: 15px/1em serif;
  text-decoration: none;
  white-space: nowrap;
  color: white;
  background-color: red;
}

.btn::before,
.btn::after {
  content: attr(aria-label);
  display: inline-block;
}
.btn::before {
  position: absolute;
  padding: 0 0.5em;
  right: 0;
  opacity: 0;
  transition: opacity .5s ease-in;
}
.btn:hover::before {
  opacity: 1;
  transition: opacity .5s ease-out;
}
.btn::after {
  position: relative;
  padding: 0 0 0 .5em;
  font-size: 0;
  color: transparent;
  transition: font-size .5s ease;
}
.btn:hover::after {
  font-size: inherit;
}
<a href="#" class="btn" style="font-size: 36px;" aria-label="Change theme">[T]</a>
<a href="#" class="btn" aria-label="Change language">[L]</a>
<a href="#" class="btn" aria-label="This text is very very very long">[LITERA]</a>
<a href="#" class="btn" aria-label="Ooops!!">[MAIN TITLE]</a>

1
  • 1
    Спасибо за помощь, не подумал про изменение размера шрифта. 17 фев в 16:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.