Obsidian is a powerhouse for note-taking and knowledge management! But, but did you know you can take it even further with CSS? Whether you’re looking to fine-tune the appearance of your workspace, create a distraction-free writing environment, or add a personal touch to your theme, CSS tricks can completely transform how Obsidian looks and feels.

In this post, I’ll share some stylish CSS customizations that you can easily apply to the buttons in your vault.

On Hover Buttons Effects⌗

Pulse⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1.5); }
  50% { transform: scale(1); }
  100% { transform: scale(1.5); }
}

Gelatine⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
  animation: gelatine 0.5s infinite;
}

@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

Shake⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
  animation: shake 1s ease infinite;
}

@keyframes shake {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
  animation: shake 2s ease infinite;
}

@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-7px);}
  20%, 40%, 60%, 80% {transform: translateX(7px);}
}

Grow⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
  animation: grow 2s ease;
}

@keyframes grow {
  from { transform: scale(1); }
  to { transform: scale(2); }
}

Bounce⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
  animation: bounce2 2s ease infinite;
}

@keyframes bounce2 {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  10% {transform: translateY(-10px);}
  30% {transform: translateY(-8px);}
  60% {transform: translateY(-5px);}
}

Flip⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
  backface-visibility: visible !important;
  animation: flip 2s ease infinite;
}

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}

Wooble⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
   animation: wobble 2s ease infinite;
}

@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

Fade Out⌗

Buttons on hover 

.clickable-icon:hover,
.workspace-tab-header-inner-icon:hover {
   animation: fade-out 1s linear infinite;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

Credits to Nelle de Jones for the CSS code.

Enable Custom CSS in Obsidian⌗

Obsidian supports custom CSS through community themes or a custom snippets folder. To use custom styles:

  1. Open Settings (Ctrl + , or Cmd + , on Mac).
  2. Navigate to Appearance.
  3. Scroll down and enable “CSS snippets”.
  4. Open your Obsidian vault.
  5. Go to the .obsidian folder (it might be hidden; enable hidden files if necessary).
  6. Inside .obsidian, create a new folder named snippets (if it doesn’t exist).
  7. Inside the snippets folder, create a new file with the .css extension, e.g., custom-style.css.
  8. Open the newly created .css file in a text editor and add your custom styles.

Whether you’re aiming for a sleek, modern look or a playful, eye-catching effect, CSS provides endless possibilities for button customization. With careful styling and thoughtful design choices, your buttons can enhance both the aesthetics and functionality of your vault.