Button hover, Page Background, Interactive Report heading and Tabs Design

 

Button hover design
=============

Inline CSS:
========

#btn_css {

    border-color: #001317;

    background-color: #00b227;

    border-style: solid;

    border-width: 0px 0px 3px;

    box-shadow: 0 -1px 0 rgb(255 255 255 / 10%) inset;

    border-radius: 6px;

    cursor: pointer;

    display: inline-block;

    font-style: normal;

    overflow: hidden;

    text-align: center;

    text-decoration: none;

    text-overflow: ellipsis;

    transition: all 200ms ease-in-out 0s;

    white-space: nowrap;

    color: #FFFFFF;

    font-size: 1.2rem;

    line-height: 1.6rem;

    padding: 0.6rem 1.2rem;

    font-weight: 400;

}

#btn_css:hover {

color: #404040 !important;

font-weight: 700 !important;

letter-spacing: 2px;

background: #e6e6e6;

-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);

-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);

transition: all 0.3s ease 0s;

}

Select Button

Static ID: btn_css

=====================================

/* Page Background */

.t-Body-main {

 background-image: url(https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-11.png)   

}

==============================================

Interactive Report heading Design 

======================

Inline CSS:
========

.t-Region-headerItems.t-Region-headerItems--title {

    color: aliceblue;

    background: #17b4a8;

    padding: 4px;

    margin-right: 3px;

    opacity: .95;

    box-shadow: 0 5px 10px -3px rgb(0 0 0 / 23%), 0 6px 10px -5px rgb(0 0 0 / 25%);

    border-radius: 4px;

}

=========================================

Tabs Design 

========

Inline CSS:
========

/* tab */

.t-Tabs--simple .t-Tabs-item.is-active .t-Tabs-link {

    box-shadow: 0 -2px 0 #ff5722 inset;

    border: 1px solid #ff5722;

    border-radius: 10px;

    background: #17b4a8;

    color: #ffffff;

}