Как объединить два элемента с использованием псевдоэлемента ::before?

1. Чтобы объединить два элемента с использованием псевдоэлемента ::before, можно использовать следующий CSS код:

```css
.element1::before {
  content: "Содержимое псевдоэлемента";
}

.element2::before {
  content: "Другое содержимое псевдоэлемента";
}
```

2. Чтобы рамка с градиентом элемента button1 не исчезала при наложении на элемент visual_block_2, можно использовать z-index для задания порядка слоев элементов. Например:

```css
.button1 {
  position: relative;
  z-index: 1;
}

.visual_block_2 {
  position: relative;
  z-index: 0;
}
```

Таким образом, рамка элемента button1 будет оставаться на переднем плане, даже если он перекрывается элементом visual_block_2.

Сначала нужно узнать, зачем для этого два элемента div и button. Достаточно одной кнопки. Если что, у неё есть два псевдо. В вашем случае не видно зачем второй псевдо. 
 
 Но в современном мире эта задача легко решается вообще без псевдо с помощью background-origin 
 https://sitist.ru/gradient-border.html