Color Buttons w/Icons and Color Inversion on Hover (City of Santa Maria)

Body

Introduction

Color buttons with icons. The colors invert when hovering over them.

This module was originally designed by Andrew Bouwmeester at City of Santa Maria.

Screenshot
Module Settings
Module Code

Screenshot

Module Settings

Show Border: unchecked
Show Name: unchecked
Sanitize Content: unchecked
Layout Notes: Works best as two modules side-by-side

Module Code

To use the code in the box below, when creating a new module:

Click the Source button in the top-left of the WYSIWYG editor
Paste the code from below
Update links or images to match your environment references
Click the Source button again to see a preview of the content
Note: some styling may not display until the module is viewed in the client portal
Save the module

Module 1

<div class="ModuleContent">
<div style="overflow: hidden;">
<style type="text/css">.custbutton {
 border: 1px solid #244ca3;
 border-radius: 8px;
 padding: 5px 2px;
 margin-bottom: 5px;
 width: 100%;
 display: block;
 overflow: hidden;
 text-decoration: none;
 color: #2b2b2b;
box-shadow: 2px 2px 5px #b9b9b9;
transition-duration: 0.5s;
transition: transform 0.2s ease-in;
}

span.icon {
    min-width: 60px;
    display: inline-block;
    float: left;
    margin: 5px 10px;
    margin-right: 0;
    height: 100%;
}

.icon .fa {
color: #244ca3 !important;
transition: transform 0.2s ease-in;
}

.title {
font-size: 1.2em;
font-weight: bold;
}

.description {
    overflow: hidden;
}
.custbutton:hover {
!transform: scale(1.01,1.01);
    border: 1px solid #244ca3;
    background: #244ca3;
    box-shadow: 2px 2px 5px #b9b9b9;
    text-decoration: none;
    !color: yellow !important;
     color: white !important;
   .icon .fa {
      !color: yellow !important;
       color: white !important;
transform: scale(1.15);
    }

}

.custbutton:active {
background-color: #244ca3;
box-shadow: 0 5px #666;

transform: translateY(2px);
}
</style>
<div class="container-fluid" style="padding: 0px;"><a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=246" target="_blank" title="Accounts & Access Category"> Accounts & Access 
New accounts, manage access, password resets, offboarding, etc </a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=247" target="_blank" title="Computers & Hardware Category"> Computers & Hardware 
Computers, monitors, and other hardware </a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=249" target="_blank" title="Email Category"> Email 
Email accounts, distribution lists, report spam and phishing </a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=250" target="_blank" title="Network & Connectivity Category"> Network & Connectivity 
Wired and wireless internet access, VPN, connectivity issues </a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=248" target="_blank" title="Phones Category"> Phones 
Request a desk phone, or report phone issues </a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=240" target="_blank" title="Printers & Scanners Category"> Printer & Scanners 
Printers and Scanners support </a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=525" target="_blank" title="Software Category"> Software 
Install, upgrade, purchase, troubleshoot applications & software</a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceCatalog?CategoryID=265" target="_blank" title="Radio Category"> Radio 
Radio Programming, Assignment, and Repair</a></div>
</div>
</div>

Module 2

span.icon {
    min-width: 60px;
    display: inline-block;
    float: left;
    margin: 5px 10px;
    margin-right: 0;
    height: 100%;
}

.icon .fa {
color: #244ca3 !important;
transition: transform 0.2s ease-in;
}

.title {
font-size: 1.2em;
font-weight: bold;
}

}

.custbutton:active {
background-color: #244ca3;
box-shadow: 0 5px #666;

transform: translateY(2px);
}
</style>
<div class="container-fluid" style="padding: 0px;"><a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceDet?ID=674" target="_blank" title="Onboard (New Network Account)"> Onboarding (New Account) 
Onboarding of new hire with email and access rights </a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceDet?ID=2267" target="_blank" title="Offboarding"> Offboarding (Deactivate Account) 
Deactivate network account and access</a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceDet?ID=676" target="_blank" title="Suspicious Email"> Suspicious Email 
Report phishing and other suspicious emails</a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceDet?ID=670" target="_blank" title="Purchase"> Purchase Hardware 
Purchase hardware</a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceDet?ID=2406" target="_blank" title="Purchase"> Purchase Software 
Purchase software through IT</a> <a class="custbutton" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Requests/ServiceDet?ID=663" target="_blank" title="Rent Equipment"> Rent Equipment 
Rent laptops, projectors, and other equipment</a></div>
</div>
</div>

Color Buttons w/Icons and Color Inversion on Hover (City of Santa Maria)

Body

Introduction

Screenshot

Module Settings

Module Code

Module 1

Module 2

Details

Details