diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index fa0b859f6c..66630c3035 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -20,10 +20,11 @@
 
   export let icon: Asset | AnySvelteComponent
   export let size: 'small' | 'medium' | 'large' = 'large'
+  export let transparent: boolean = false
   export let selected: boolean = false
 </script>
 
-<div class="icon-button icon-{size}" class:selected on:click>
+<div class="icon-button icon-{size}" class:selected class:transparent on:click>
   <div class="content">
     {#if typeof (icon) === 'string'}
       <Icon {icon} size={'small'}/>
@@ -49,6 +50,7 @@
       pointer-events: none;
     }
     &.selected { background-color: var(--theme-button-bg-hovered); }
+    &.transparent { background-color: rgba(31, 31, 37, .3); }
     &:hover { border-color: var(--theme-bg-focused-border); }
     &:active { background-color: var(--theme-bg-accent-color); }
   }
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 0e3cddd94c..2d97c3407f 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -179,11 +179,11 @@
 
   <div class="flex-row-center channels">
     {#if !object.channels || object.channels.length === 0}
-      <CircleButton icon={IconAdd} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
+      <CircleButton icon={IconAdd} size={'small'} transparent on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
       <span><Label label={'Add social links'} /></span>
     {:else}
       <Channels value={object.channels} size={'small'} />
-      <CircleButton icon={Edit} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
+      <CircleButton icon={Edit} size={'small'} transparent on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
     {/if}
   </div>