1

Хотел спросить, как построить вот такие вот элементы? Я знаю, что с помощью псевдо-элементов, но не знаю как жто сделать, помогите пожалуйста. введите сюда описание изображения

<div class="button-load-more">
    <button class="title" ng-click="loadMore(event)">load more comments</button>
</div>

вот мой CSS

.button-load-more
    display: flex
    -webkit-justify-content: center 
     justify-content: center  
    padding-top: 50px 
    padding-bottom: 60px
    button
      font-family: $book
      min-width: 220px  
      font-size: 17px
      opacity: 0.5
      background-color: none
      border: 1px solid lightgrey
      padding: 5px

2 ответа 2

3

:root {
  --color: lightgray;
}

fieldset {
  border-width: 1px;
  border-style: solid none none none;
  border-color: var(--color);
}

button {
  background: none;
  border: 1px solid var(--color);
  color: #aaa;
  font-family: serif;
  margin: .4em;
  padding: .4em .8em;
}
<fieldset>
  <legend align="center">
    <button class="title" ng-click="loadMore(event)">load more comments</button>
  </legend>
</fieldset>

4
  • К чему идет :root? У меня кнопка вконце страницы, написано на sass 12 сен 2018 в 18:43
  • Только увеличивая padding в fieldset - я получаю эти линии. Увеличивая padding - я увеличиваю место внизу блока. 12 сен 2018 в 18:53
  • @ПавелИгоревич если вы пользуетесь sass для вас не должно быть проблемы переделать все под себя. я предпочитаю ванильный css. По второму вопросу - это "эмуляция" того, что вам нужно. Просто погуглите зачем fieldset. 12 сен 2018 в 19:08
  • спасибо, я уже разобрался! Все работает, а на счёт fieldset - нужно ещё разобраться 12 сен 2018 в 19:25
2

вот решение на нативном css c псевдоэлементами

.button-load-more {
  display: flex;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 60px;
  position: relative;
}

.button-load-more::before {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 47%;
  background-color: lightgray;
}

button {
  min-width: 220px;
  font-size: 17px;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 0 transparent;
  position: relative;
  border: none;
  color: lightgray;
}

button::after {
  content: '';
  display: block;
  position: absolute;
  background-color: transparent;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid lightgray;
}
<div class="button-load-more">
  <button class="title" ng-click="loadMore(event)">load more comments</button>
</div>

Ваш ответ

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

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