How simple visual treatments can improve usability – Case: Bootstrap

Before:

After quick redesign:

Try it out yourself in Google Chrome:

1. Get the Stylebot Chrome extension
2. Go to getbootstrap.com/getting-started/
3. Open Stylebot and click the "Edit CSS" button
4. Paste in the following CSS and click Save:

/***********************************************************
   Go to http://getbootstrap.com/getting-started/
   Then try paste this CSS into Stylebot Chrome extension: 
***********************************************************/

.back-to-top {
    border: 1px solid oklch(0.8775 0.0629 248.55);
    border-radius: 5px;
    color: dodgerblue;
    padding: 10px;
}

.back-to-top:before {
    content: "⇧";
    font-size: 150%;
    line-height: 1px;
    padding-right: 6px;
}

li.active > a {
    background-color: oklch(0.9648 0.0178 245.38);
}