Welcome to AZ-styles! Before releasing your imagination, we strongly recommend you read this documentation.
Please, make sure you download the latest AZ-styles version
- Open AZ-styles.zip
- Copy and paste az-styles-min.css in the css root of your website.
- Integrate az-styles-min.css in your HTML page.
<!-- AZ-styles CSS -->
<link rel="stylesheet" type="text/css" href="css/az-styles-min.css"/>
AZ-styles is the most flexible and expansive library in the world, providing easy access to the most popular color & style combinations in the web and allowing the user to customize any element with "class".
In order to get a better understanding of all the available options for each feature make sure to read in detail each section.
Let's begin!
Apply a background color to any element. There are over 260 colors available. Background colors are called by the color class black-purple
Check all Colors
black-purpleblue-linkwhite-redbumblebeeApply a gradient color to any element. There are 30 gradient colors available. Gradient colors are called by the color class gr-
Check all Gradients
gr-dark-bluegr-light-greygr-light-redgr-viola-pinkApply a Border color, size and shape to any element. With over 260 color, 25 border variations and hundreds of shape variations, there are milions of available variations.
Border colors are called by the class b- + color. Eg:. b-yellow
Borders are called by the class border + size and direction. Eg:. "border-top 2px" border-t-2
Check all Border variations - Shapes variations
b-blue border-3b-deep-pink border-t-5 round-24 square-bl square-brborder round-12 b-pineappleborder-t-3 b-blackApply a text color using the class t- + color class. Eg:. t-red.
All 260 Colors are available as text color as well.
Check all Color variations
To apply a text hover color to an text add: t-hv- + color class name pink
Eg:. t-hv-pink
When you surround an element with colors, borders, shapes, shadows and much more, you can built anything you want.
Check Color variations
Check Gradients variations
Check Border variations
Check Shadows variations
Check Shapes variations
Check Spacing variations
Let's view some examples.
primary-btn round-12 t-white t-hv-lime google-green hv-lego-green
primary-btn large no-bg border-2 b-vibrant-purple b-hv-ig-pink t-vibrant-purple t-hv-ig-pink
primary-btn big round gr-vintage t-pine hv-round-12
primary-btn big round-3 dropbox hv-alice-blue hv-shadow-6 t-alice-blue t-hv-dropbox
primary-btn big round square-tl square-bl carrot lspace-2 hv-shy-orange shadow t-white-orange
primary-btn big round-3 carrot hv-shy-orange shadow t-white-orange
primary-btn tiny snapchat hv-dark-clay t-dark-clay t-hv-snapchat
primary-btn small round gr-viola-pink hv-light-red t-white
primary-btn round white hv-wedding-white border b-chartreuse b-hv-ferm t-ferm
Apply a background, text or border color to a specific element, div or section with color class black
To apply a color to a text use: t- + color class name black Eg:. t-black
To apply a color to a border use: b- + color class name red Eg:. b-red
To apply a hover color to an element, div, button, etc... use: hv- + color class name pink Eg:. hv-pink
To apply a hover color to a border use: b-hv- + color class name red Eg:. b-hv-red
To apply a hover color to a text use: t-hv- + color class name pink Eg:. t-hv-pink
white light-white light-grey light-smoke cloud dark-smoke web-grey software smoke stone concrete grey mist-grey marble-grey black elegant-black black-matte charcoal eigen-black designer-black soot cold-black dark-grey boot neutral-black cyberspace marina black-blue dark-navy elegance blue-navy dropbox midnight-blue aol teal-blue outer-space blue-violet facebook denim navy blue-link blue-ultra blue-electric blue-vibrant blue-light blue-azure blue linkedin myspace google-blue explorer aquamarine pacific-blue blue-bell pale-blue cerulian-blue cornflower-blue blue-host twitter skype blue-energy blue-day blizzard-blue sky blue-cloud morning-blue alice-blue light-sky light-blue night-green forest shadow-green grey-green dark-green seaweed jupiter moss crocodile pickle nature pear olive grass outer-green green inner-green elegant-green web-green lego-green google-green ferm seafoam pale-green mint electric-green vibrant-green tree hyper-green chartreuse lime pine sage lavender-green glass-green olive-leaf pistachio amalfi beige light-green wedding-white mahogany wine merlot jam sangria currant blood berry garnet burgundy scarlet apple cherry lipstick candy crimson blush you-tube google-red red-rose red-brick back-red dark-red electric-red pinterest lego-red power-red red plus-red weak-red web-red mid-red smooth-red roof light-red white-red dark-viola deep-viola black-purple electric-violet web-violet dark-burgundy camelot ig-purple pale-viola vintage-violet dark-lavender lavender mid-purple vintage-purple deep-purple ig-violet vibrant-viola vibrant-purple superman blue-purple dark-purple periwinkle white-purple violet lilla rose elegant-viola hibiscus vintage-pink dark-pink han ballet cotton-candy azalea geraldine salmon pink peach light-salmon vibrant-violet vibrant-pink hollywood deep-pink change ig-pink pastel-pink light-pink dark-clay dark-brown elegant-brown brown deep-brown mid-brown wood siena mild-brown yellow-brown cider ochre peru vintage-brown tan-brown clay wolf light-brown moon snow squash terracotta sandstone royal melon brick salt burnt-orange salamander orange tiger ig-orange elegant-orange pumpkin carrot mid-orange caramel arancio shy-orange fire ginger apricot honey light-orange rose-orange white-orange gold tromba light-gold corn amber ig-yellow google-yellow fire deep-yellow dark-yellow yellow cyber-yellow bumblebee pineapple snapchat vibrant-yellow lemon mustard royal-yellow mellow blond pale-yellow banana light-yellow cream Apply a gradient to a specific element, div or section with the class gr- + "color"
gr-whitegr-light-greygr-dark-greygr-red-yellowgr-mid-orangegr-orange-violagr-salmon-pinkgr-viola-pinkgr-pink-yellowgr-bluegr-light-bluegr-dark-bluegr-greengr-light-greengr-dark-greengr-pinkgr-light-pinkgr-dark-pinkgr-yellow-greengr-yellow-orangegr-blue-yellowgr-blue-pinkgr-aqua-pinkgr-dark-purplegr-vintagegr-redgr-light-redgr-dark-redgr-browngr-light-brownApply a shadow to a specific element, div or section with the class shadow- + shadow #. 10 shadows options
Apply a opacity to a specific element, div or section by using the class op- + the value. eg:. op-2 opacity 20%
op-9op-8op-7op-6op-5op-4op-3op-2op-1Use the class color-overlay to overlay a color on an element, div, section.
Use the class gradient-overlay & gradient-overlay-white to overlay a gradient on an element, div or section.
Using the opacity classes will control the opacity of the overlay op-3
color-overlay pink op-8
gradient-overlay op-6
gradient-overlay-white op-6
Apply a border to a specific element, div or section with the class border. E.g:. top will be border-t. 2px top will be border-2-t.
Border options are as explained bellow.
Control the border radius to a specific element, div or section with the classes round, square, pill.
Control each corner individually adding the class square- + sides. eg:. "top-lef" tl. Just a few examples.
1 button class - unlimited variations. Use primary-btn to call the button class + the desired size large
There are 5 main button size variations.
Use the class icon for socials and icons. Eg:. primary-btn icon blue-cloud pill
Control the margin of a specific element, div or section with the class m + required value Eg:. margin 10px m-10
Adding first letter of a direction will impact the specified direction.
Example:
margin-top 10px mt-10
margin-bottom 40px mb-40
margin-left 70px ml-70
margin-right 40px mr-40
mtb-100mt-50mb-80ml-50You can also remove margin for top, left & right For example:
margin-top -100px mt-minus-100
margin-left -40px ml-minus-50
ml-minus-50 mt-40no-margin will remove all margin of an element
Margin ( m- + # ) Eg:.m-15
5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px, 55px, 60px, 65px, 70px, 75px, 80px, 85px, 90px, 95px, 100px
Margin Top/Bottom ( mtb- + # ) Eg:.mtb-20
5px, 10px, 15px, 20px, 25px, 30px, 40px, 50px, 60px, 70px, 80px, 90px, 100px, 120px, 150px, 200px
Margin Top ( mt- + # ) Eg:.mt-30
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 0px, 100px, 120px, 150px, 200px
Margin Bottom ( mb- + # ) Eg:.mb-40
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 0px, 100px, 120px, 150px, 200px
Margin Left ( ml- + # ) Eg:.ml-30
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 90px, 100px, 120px, 150px, 200px
Margin Right ( mr- + # ) Eg:.mr-30
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 90px, 100px, 120px, 150px, 200px
Margin Left Minus ( ml- + minus- + # ) Eg:.ml-minus-30
-10px, -20px, -30px, -40px, -50px, -60px, -70px, -80px, -90px, -100px, -120px, -150px, -200px, -250px, -300px
Margin Right Minus ( mr- + minus- + # ) Eg:.mr-minus-70
-10px, -20px, -30px, -40px, -50px, -60px, -70px, -80px, -90px, -100px, -120px, -150px, -200px, -250px, -300px
Margin Top Minus ( mt- + minus- + # ) Eg:.mt-minus-100
-10px, -20px, -30px, -40px, -50px, -60px, -70px, -80px, -90px, -100px, -120px, -150px, -200px, -250px, -300px
Control the padding of a specific element, div or section with the class p + required value Eg:. padding 10px p-10
Adding first letter of a direction will impact the specified direction.
Example:
padding-top 10px pt-10
padding-bottom 40px pb-40
padding-left 70px pl-70
padding-right 40px pr-40
ptb-100pt-50pb-80pl-50no-padding will remove all padding of an element
Padding ( p- + # ) Eg:.p-15
5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px, 55px, 60px, 65px, 70px, 75px, 80px, 85px, 90px, 95px, 100px
Padding Top/Bottom ( ptb- + # ) Eg:.ptb-20
5px, 10px, 15px, 20px, 25px, 30px, 40px, 50px, 60px, 70px, 80px, 90px, 100px, 120px, 150px
Padding Top ( pt- + # ) Eg:.pt-30
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 0px, 100px, 120px, 150px, 200px
Padding Bottom ( pb- + # ) Eg:.pb-40
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 0px, 100px, 120px, 150px, 200px
Padding Left ( pl- + # ) Eg:.pl-30
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 90px, 100px, 120px, 150px, 200px
Padding Right ( pr- + # ) Eg:.pr-30
10px, 20px, 30px, 40px, 50px, 60px, 70px, 80px, 90px, 100px, 120px, 150px, 200px
For letter-spacing use the class lspace-1 - # is the spacing in px.
lspace-1 Letter spacing 1px
lspace-2 Letter spacing 2px
lspace-3 Letter spacing 3px
lspace-4 Letter spacing 4px
lspace-5 Letter spacing 5px
Use the alignment class to format the text. Eg:. left
leftrightcenterjustifyBelow some of the most popular stunning color combinations.
changeclouddeep-yellowdeep-violapeachgeraldinedark-pinkdeep-violaouter-spaceglass-greenlight-orangesalmonweb-redgrey-greenpistachioolive-leaflight-orangepinkgeraldinebeigelight-yellowyellowshy-orangeweb-redalice-bluedropboxelegant-orangeelegant-greenpineappleweak-reddropbox