101 10
Sign in to rate

Large and Colorful Buttons

<10kB. Updated 2018-10-03.
The author has shared 3 other item(s).

Description

This add-on will enlarge and color the buttons at the bottom of the review screen. The concept of this add-on was inspired by the following add-ons: * Bigger Show Answer Button * Bigger Show All Answer Buttons * Anki 2.0.x coloured ease buttons Screenshot Changing Size, Color, etc. By default, the colors of the buttons is set to be similar to those of Ankidroid. You can change the size, color, etc. of the buttons by editing user_bottom_buttons.css. To edit: Tools > Add-ons > Select "Large and Colorful Buttons" > Click "View Files" > Open the user_files folder > Edit the user_bottom_buttons.css with a text editor > Restart Anki When updating this add-on, the user_bottom_buttons.css will be preserved as it is. See also Writing Anki 2.1.x Add-ons #User Files Reverting to default If you want to revert the user_bottom_buttons.css you have edited to default, please delete or rename it and restart Anki. A new user_bottom_buttons.css will be automatically created in the user_files folder. Removing tooltips (optional feature) This add-on offers an option to remove tooltips for buttons like "Shortcut key: ...". This option is disabled by default. To enable this option: Tools > Add-ons > Select "Large and Colorful Buttons" > Click "Config" > Set the variable REMOVE_TOOLTIP to true > Restart Anki Note: true or false must be all lower case characters. Changelog 2018-10-03: NOTE: Due to changes in Anki version 2.1.5, the buttons are not properly aligned when using the default user_bottom_buttons.css bundled with this add-on. So, the default user_bottom_buttons.css has modified in order to align buttons properly. But, this modifications to user_bottom_buttons.css will NOT automatically apply to existing users, only to new users. To update user_bottom_buttons.css, please delete or rename it and restart Anki. An updated user_bottom_buttons.css will be created in the user_files folder. Sorry for the inconvenience. * Modified default user_bottom_buttons.css - Tweaked margin to avoid conflict with the margin setting in Anki version 2.1.5 or higher - Added cursor: pointer; to selector for button element - Added some CSS selectors * Added an option to remove tooltips for buttons 2018-09-23: * Fixed a bug that would cause FileNotFoundError when user_files folder is not present * Fixed a bug that would cause a Javascript error when using single quotes in user_bottom_buttons.css 2018-08-18: * Initial release

Download

As add-ons are programs downloaded from the internet, they are potentially malicious. You should only download add-ons you trust.

Supported Anki versions:

To download this add-on, please copy and paste the following code into Anki 2.1:

1829090218

If you were linked to this page from the internet, please open Anki on your computer, go to the Tools->Add-ons menu item, then click on Get Add-ons and paste in the code.

All Anki 2.1.x Add-Ons

Reviews

on 1678944890
Error background color when hover at Version ⁨2.1.60 (76d88073)⁩
on 1677775640
Really nice and practical design

update: Doesn't work anymore with Version ⁨2.1.60 (76d88073)⁩
Python 3.9.15 Qt 5.15.2 PyQt 5.15.5
on 1677247382
no longer fits in screen view with 2.1 update
on 1676957782
bello
on 1676039861
Só ficou com os botões gigantes, nada além disso.
on 1671557022
Good to use.
on 1671131973
Muito bom, gratidão.
Very good, gratitude.
on 1665230264
Buttons do not fit in the window (even fullscreen)
on 1664386621
Good, but not working when window width is low. The show answer button expands all the way and break interface.
on 1661336113
Thanks!
on 1660671384
Thank you <3
on 1655938256
very usefull!
on 1654270385
It does what it says and is stable in use.
on 1648137135
ok
on 1644679341
not working right in ⁨2.1.49. I mean it does nothing anymore.
on 1640180643
Thank you very much for this add-on, which fits perfectly with my needs 👍
on 1637019352
Love this!
on 1633393682
To make this work in night mode edit the user_bottom_buttons.css and change all "background-color" to "background"
on 1632771747
Good lookin' buttons!
on 1631047477
Very Useful!
on 1626098462
perfect! Very helpful!
on 1623696401
This addon is simple but perfect. Works better then Advanced review botton
on 1618576079
Button look good
on 1617167024
Very Large and Colorful Buttons. Exactly what I was looking for.
on 1616397912
Must have!
on 1615830203
Really, really awesome addon. Thank you very much.
Some customization examples:

/*
* Make buttons brighter on hover
*/
#middle button:hover {
filter: brightness(110%);
}

/*
* Bring back Edit and More buttons even if the anki window is small
*/
.stat {
display: table-cell !important;
}

/*
* Outline the buttons on keyboard focus (and to be able to see the default button)
* Delete the outline-offset lines if you don't want the 1px extra space between
*/
/* button focus outlines */
#innertable:focus-within :focus {
outline: 1px solid #899aa8f7 !important;
border-radius: 0px !important;
outline-offset: 1px;
}

/* fix for the default focused button */
.focus {
outline: 1px solid #899aa8f7;
border-radius: 0px !important;
outline-offset: 1px;
}

Example full css that I use: https://gist.github.com/Onurtag/59754ca4604d71955ab62d18d29e5352
on 1609855140
Does not work in night mode. :-( My eyes burn from the sun of Anki light mode.
on 1609746353
perfection
on 1609256476
Make this work with night mode, pretty please.

Also button height cannot change in anki 2.1.38
on 1609166409
VERY VERY VERY USEFUL :)))
on 1609002393
Great add-on. However, I just can't figure out how to make the font color white on the buttons (as featured above in the write-up about the add-on).
My red button has red text, green has green font, etc. and it's hard to read them. How can I make the buttons font color white?
on 1607256460
Bad ,I understood nothing
on 1606915722
Nice!
on 1606818136
Like it much, but didn't work in nightmodus.
on 1604428769
It's great. But how do I configure the size of the buttons?
on 1603902432
Hello, when I update to version 2.1.35, the color does not show on night mode. Anyone know how to fix this? Thank you.
on 1603275015
Nice! Makes it a bit like in AnkiDroid.

Btw. Expanding from another comment...

You can make the border darker for the button currently in focus with this:

button:focus {
border: solid 1px rgba(0, 0, 0, 0.7);
}

Someone else put a similar solution, but theirs added a weird square around the button. I find this more elegant.
on 1602256220
I really like this extension, congratulations to the creators. Unfortunately when the "night mode" function was implemented in ANKI, and when using this function the button colors no longer appear.
on 1601547155
Thank you for the addon.
If you want the color of "hard" to be like on Anki iOS mobile, then change it, as described in the instructions, to "#ff9900".
on 1599894506
Love seeing the buttons bigger and with color! I also was able to change the colors to my preference.
on 1599641775
works well, and editable.
on 1596504585
Muito bom!
on 1595007887
Useful and worked fine on 2.1.26
on 1594386493
Ótimo, muito obrigado.
on 1592750168
works
on 1590460137
I love the enhanced visual feedback! This addon is also quite customizable. For example, I removed all the other formatting except for "again" and "good" (the only two buttons I use).
on 1590194287
Better readability, easier to click
on 1588739033
Made Anki much easier to use on a touchscreen computer!
on 1587888631
just awesome
on 1587677514
Thanks.
on 1587373280
does what it should do
on 1587001225
thanks
on 1586908085
Its Cool.
on 1586076424
it is just gray
on 1585484487
Love it!
on 1585333740
just awesome
on 1585058455
It worked great until 2.22 and the native Night Mode, the buttons are large but just grey :( Any chance to update it so its colorful again?
on 1581884955
Good addition to the software, thank you!
on 1581876795
Please update to 2.1.20. Now it displays colors only on hover.

Edit: Thanks to the other user for a stopgap solution. I also added:
border-style: hidden;
on 1581855016
Please update to version 2.1.20. As a stopgap solution if you want the same style of buttons as pre-Anki 2.1.20 please add this line:
background: transparent;

to "/* All rating buttons */ #middle button" section
in "user_bottom_buttons.css" file
on 1580224854
Looks great!
on 1580122832
Thank you
on 1580077163
結構
on 1579707358
It's as great as Bobby told me it would be!!
on 1579670961
Makes the buttons big and colorful just like the Android version
on 1578844242
Excelent add-on!
on 1577887313
really helpful.
on 1577197284
Thank you

a lot better than other add-on's for this purpose

Big & beautiful buttons

Great jobs
on 1577171811
Much better!
on 1576276509
Great, much nicer than standard buttons
on 1573645380
Gorgeous!
on 1572959023
very good.

Can I also use this to increase the font size of the dates? https://www.reddit.com/r/Anki/comments/dn0xjd/how_to_increase_the_font_size_of_the_bottom/
Comment from author
I replied to your post on r/Anki.
on 1572438803
amazing!
on 1572075217
Thank you so so so much!
It's the most important Add-on for ver2.1!!
on 1571863076
Must have!
on 1571528321
Awesome
on 1569867239
Works and makes it easier to use on my monitor.
on 1569443733
It's amazing how much simple aesthetics can do for you
on 1569260261
Great improvement, makes life easier on a touch screen.
on 1567233317
One of my favourite addons! thank you very much for this stellar work
on 1567083052
Thanks. Really helpful.
on 1566645167
Works great!
on 1566640305
clean and neat!
on 1565467164
If you liked the More Answer Buttons add-on, check this out:
https://github.com/lovac42/ReMemorizeButtons
on 1564242548
Funciona
on 1563395739
Thanks!
on 1562905598
Hi,

Thank you for the add on.
I wonder how can I edit the CSS to achieve something like I have on Anki 2.0
https://imgur.com/a/sj8cX3B
on 1560562908
Amazing really helped with creating ITTOS study cards for PMP exam
on 1559929956
Good
on 1559702990
Love these, thank you.
on 1559028372
Great
on 1556283336
Good for tablet mode.
on 1554310961
I have a windows tablet and the default UI shows up very small... This is awesome, thank you
on 1553096558
Nice.
on 1552795612
Amazing this addon!
on 1552112847
Easier to click now
on 1549531599
Very nice
on 1548536794
Big and beautiful buttons
on 1545931010
The addon works for me, but the colors of the buttons are swapped: Not the good, but the easy button is always coloured green.
https://i.imgur.com/m1G0Hc0.png
I don't know why this is.
I use the newest Anki version 2.1.7beta for windows
Comment from author
The default css for this add-on is written assuming that Anki's default answer is always "Good". So, when used in conjunction with an add-on that changes the Anki's default answer, such as "Default Answer Modified", the css may not work as intended. In that case, you may need to modify css accordingly. Sorry if I am not clear enough, English is not my native language.
on 1544654481
Must have
on 1543637449
Great! its more similar to the android version and its better than another addon which only changes the color of text.
on 1542969274
good
on 1540548623
Awesome.
on 1540339504
Nice.
on 1539920941
I really enjoy it
on 1539634840
Pretty and very practical on touch screens
on 1538222937
Makes reviewing colourful and customisation is awesome...! Thank you!
on 1537722797
This is amazing! Makes it much easier to use Anki on touchscreen computers, and is extremely customizable.
on 1537537124
Fantastic!
on 1536720479
Best of all. beautiful
on 1534597185
Love the customizability of this. Stellar work!