Customizing the style of action selectors in MicroStrategy can be tricky and, by default, we don’t have a lot of style options.

A good way of styling them is using CSS and that is super simple to do.

First, add a HTML Container in the document where you have your Action Selectors (it can be either a button or a link) and set it to use HTML Text instead of IFRAME.

Go to this website: https://www.bestcssbuttongenerator.com/ and generate your own button style.

Then, copy the properties and add them with these classes:

.mstrmojo-DocSelector div, .mstrmojo-DocSelector table, .mstrmojo-DocSelector tbody, .mstrmojo-DocSelector tr, .mstrmojo-DocSelector td, .mstrmojo-DocSelector input, .mstrmojo-DocSelector {

// the properties go here…

}

Now, make sure to add !important in every property that you used and add the custom style tags. Here is an example:

<style type=”text/css”>

.mstrmojo-DocSelector div, .mstrmojo-DocSelector table, .mstrmojo-DocSelector tbody, .mstrmojo-DocSelector tr, .mstrmojo-DocSelector td, .mstrmojo-DocSelector input, .mstrmojo-DocSelector {

 

display: inline-block !important;

background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%) !important;

background-color:#44c767 !important;

border-radius:28px !important;

border:0px solid #18ab29 !important;

cursor:pointer !important;

color:#f5f5f5 !important;

font-family:Arial !important;

font-size:17px !important;

text-decoration:none !important;

text-shadow:0px 1px 0px #2f6627 !important;

padding-top: 1px !important;

}

 

</style>

 

A screenshot of a cell phone Description automatically generated

 

Now you have your own styled action selector button/link.