Блог

Главная - Вопросы по программированию - Как изменить текст кнопки без javascript

Как изменить текст кнопки без javascript

#html #css #button

#HTML #css #кнопка

Вопрос:

Эй, я в замешательстве, что мы можем сделать <button>cat</button> <button>bike</button> без использования javascript. Можем ли мы сделать это с помощью CSS?

Ответ №1:

При такой точной HTML-разметке использование content должно дать вам такую возможность. Сначала мы делаем cat размер шрифта равным 0, чтобы скрыть его, и добавляем font-size значение to button::before , чтобы переопределить родительский стиль и сделать отображение «велосипед».

 button {
  font-size: 0;
}

button::before {
  content: 'bike';
  font-size: 12px;
}

Ответ №2:

вы можете использовать это:

это на codepen.io

https://codepen.io/badurski/pen/YxJgoe

 @import url("https://fonts.googleapis.com/css?family=Roboto:900");
body {
  background: #111;
}

a {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  color: black;
  text-decoration: none;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.h-button {
  background: white;
  padding: 20px;
  width: 250px;
  text-align: center;
}
.h-button span {
  display: inline-block;
  min-width: 0.3em;
  text-transform: uppercase;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  opacity: 0;
  transform: translate(0, -20px);
}
.h-button:before {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
  text-transform: uppercase;
  letter-spacing: 3.5px;
  opacity: 1;
  transform: translate(0, 0px);
}
.h-button:hover:before, .h-button:focus:before {
  opacity: 0;
  transform: translate(0, 20px);
}
.h-button:hover span, .h-button:focus span {
  opacity: 1;
  transform: translate(0, 0);
}
.h-button:hover span:nth-child(1), .h-button:focus span:nth-child(1) {
  transition-delay: 0.025s;
}
.h-button:hover span:nth-child(2), .h-button:focus span:nth-child(2) {
  transition-delay: 0.05s;
}
.h-button:hover span:nth-child(3), .h-button:focus span:nth-child(3) {
  transition-delay: 0.075s;
}
.h-button:hover span:nth-child(4), .h-button:focus span:nth-child(4) {
  transition-delay: 0.1s;
}
.h-button:hover span:nth-child(5), .h-button:focus span:nth-child(5) {
  transition-delay: 0.125s;
}
.h-button:hover span:nth-child(6), .h-button:focus span:nth-child(6) {
  transition-delay: 0.15s;
} 
 <a aria-label='Thanks' class='h-button centered' data-text='Hover me' href='#'>
  <span>T</span>
  <span>h</span>
  <span>a</span>
  <span>n</span>
  <span>k</span>
  <span>s</span>
</a>