Как настроить интеграцию SCSS с WordPress?

Для настройки интеграции SCSS с WordPress вы можете использовать плагин WP-SCSS, как вы уже упомянули. Однако, код, который вы привели, не указывает, где и каким образом SCSS должен быть использован. 

Для начала, установите и активируйте плагин WP-SCSS. Затем создайте файл SCSS, например, с именем "style.scss". В этом файле вы можете определить стили для вашей кнопки, а также для анимированного кольцевого элемента.

Например, в файле "style.scss" вы можете добавить следующий код:

```scss
.my-button {
  // Оформление кнопки
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  
  // Анимированный кольцевой элемент
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s infinite linear;
  }
  
  // Изменения при наведении или фокусировке
  &:hover, &:focus {
    background-color: #ff0000;
    color: #000;
  }
}

// Анимация кольцевого элемента
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
```

Затем, в файле "functions.php" вашей темы WordPress, добавьте следующий код:

```php
function enqueue_custom_styles() {
  wp_enqueue_style( 'my-styles', get_template_directory_uri() . '/style.scss' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );
```

Теперь при каждой загрузке вашего сайта, стили из файла "style.scss" будут преобразованы в CSS и применены к вашей кнопке. 

Обратите внимание, что вы должны заменить путь к файлу "style.scss" на актуальный путь в вашей теме WordPress.