css - How to change button border colour, font colour and background colour in github pages cayman theme

Question

I tried to change the background colour and font colour on the website http://scikit-surgery.org.

I tried adding the following lines in assets/css/style.scss but no luck

$button-color: #0000ff !default;
$button-border-color: #0000ff !default;


  .btn {
    color: #0000ff;
    border-color: #0000ff; 
    // background-color: #008CBA;
  }

Could any one please help how to change the button features. Here is the source code of the repo https://github.com/UCL/scikit-surgery/tree/web

Answer 1

I was able to change the button colour, button border, button effects on hover. To do this first create a directory in assets/css and in root directory create a file style.scss. In that file paste the following code

---
---

@import "{{ site.theme }}";

  .btn {
    color: #0000ff;
    border-color: #0000ff; 
    // background-color: #008CBA;
  } 

  .btn:hover {
    color: #0bb6e1cc;
    text-decoration: none;
    background-color: #7c940ea1;
    border-color: #0000ff;
  }

To see it in action check the repo linked above in the quesiton.