Exclude Image and Buttons from css link hover effects

Hi,
I'm trying to exclude link hover effects from a class button and all img objects. But couldn't succeed.

Here is the code I'm using.

:root {
  --mainColor: #ff9800;
}
.inside-article:not(.button){}  p a{
  background:
     linear-gradient(
       to bottom, var(--mainColor) 0%,
       var(--mainColor) 100%
     );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  text-decoration: none;
  transition: background-size .2s;
}

.inside-article p a:hover{
  background-size: 4px 50px;
}

I tried several ways described in other support chats but couldn't succeed.

Can you please let me know what am I doing wrong here?