Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
Green Button
Pink Button
Red Button
Orange Button
Blue Button
Green button
Pink button
Red button
Orange button
Blue button
/* BY ESTEBAN MAUVAIS [--=INDEX=--] /BODY /GRADIENTS /GREEN /PINK /RED /ORANGE /BLUE /BASE BUTTON /ROTATE [--=END INDEX=--] */ /*BODY*/ body { font-family: 'Roboto', sans-serif; } body, .button:after { background: #2c3e50; } .ctn { display: block; margin: auto; text-align: center; } footer { position: fixed; bottom: 5px; right: 5px; color: #FFF; } footer a, footer a:after { font-size: 1em !important; } /*END BODY*/ /*GRADIENTS*/ /*GREEN*/ .b-green, .b-green:before { background: rgba(73,155,234,1); background: -moz-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(26,188,156,1))); background: -webkit-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: -o-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: -ms-linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); background: linear-gradient(45deg, rgba(73,155,234,1) 0%, rgba(26,188,156,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1abc9c', GradientType=1 ); } /*PINK*/ .b-pink, .b-pink:before { background: rgba(231,72,234,1); background: -moz-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,72,234,1)), color-stop(100%, rgba(75,26,188,1))); background: -webkit-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: -o-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: -ms-linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); background: linear-gradient(45deg, rgba(231,72,234,1) 0%, rgba(75,26,188,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea', endColorstr='#4b1abc', GradientType=1 ); } /*RED*/ .b-red, .b-red:before { background: rgba(234,110,72,1); background: -moz-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(234,110,72,1)), color-stop(100%, rgba(188,26,99,1))); background: -webkit-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: -o-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: -ms-linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); background: linear-gradient(45deg, rgba(234,110,72,1) 0%, rgba(188,26,99,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6e48', endColorstr='#bc1a63', GradientType=1 ); } /*ORANGE*/ .b-orange, .b-orange:before { background: rgba(255,193,7,1); background: -moz-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,193,7,1)), color-stop(100%, rgba(255,87,34,1))); background: -webkit-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -o-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: -ms-linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); background: linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(255,87,34,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ff5722', GradientType=1 ); } /*BLUE*/ .b-blue, .b-blue:before { background: rgba(5,118,255,1); background: -moz-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(5,118,255,1)), color-stop(100%, rgba(36,248,255,1))); background: -webkit-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: -o-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: -ms-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); background: linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0576ff', endColorstr='#24f8ff', GradientType=1 ); } /*END GRADIENTS*/ /*BASE BUTTON*/ .button { display: inline-block; position: relative; border-radius: 3px; text-decoration: none; padding: .5em; margin: .5em; font-size: 2em; font-weight: bold; transition: all .5s; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .button:hover { text-shadow: 0px 0px 0px rgba(255, 255, 255, .75); } .button:hover:after { left: 100%; top: 100%; bottom: 100%; right: 100%; } .button:before { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; border-radius: 5px; transition: all .5s; } .button:after { content: ''; display: block; position: absolute; left: 2px; top: 2px; bottom: 2px; right: 2px; z-index: -1; border-radius: 5px; transition: all .5s; } .button2 { display: inline-block; font-size: 2em; margin: .5em; padding: .5em; border-radius: 5px; transition: all .5s; filter: hue-rotate(0deg); color: #FFF; text-decoration: none; } /*END BASE BUTTON*/ /*ROTATE*/ .rot-360-noscoop:hover { filter: hue-rotate(360deg); transform: rotate(360deg); } .rot-135:hover { filter: hue-rotate(135deg); } .rot-90:hover { filter: hue-rotate(90deg); } /*END ROTATE*/
87
Gradient Button with Animation
By:
pixeldev
body { margin: 0; padding: 0; box-sizing: border-box; background: dodgerblue; } .line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-bottom: 3px solid white; animation: line 2s linear infinite; height: 50px; width: 500px; } .hexagon { position: absolute; width: 80px; height: 50px; background: #fff; left: 0; bottom: 20px; animation: linee 2s linear infinite; } .hexagon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: rotate(60deg); } .hexagon:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: rotate(-60deg); } @keyframes linee { 0% { transform: rotate(0deg); left: 0; } 50% { transform: rotate(360deg); left: 420px; } 100% { transform: rotate(0deg); left: 0; } } @keyframes line { 0% { transform: translate(-50%, -50%) rotate(30deg); } 25% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(-30deg); } 75% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(30deg); } }
85
Sliding Hexagon Loading Animation – Pure Css Tutorials – Css Animation Effects
By:
pixeldev
HOME
BAKERY
Cake
Bread
Patisserie
ORDER
CONTACT
/*------------------- Reset browser CSS -------------------*/ * { padding: 0px; margin: 0px; border: 0 none; box-sizing: border-box; } body { width: 100%; height: 100%; min-height: 400px; background-color: #ffffff; font-family: 'Josefin Sans', Arial, sans-serif; font-style: normal; } /*--------------------- Header Styling ---------------------*/ /* header container */ header { position: relative; height: 100px; width: 100%; min-width: 800px; background: #cbf3f0; } /* navbar container */ #mainmenu-navbar { position: absolute; bottom: 0px; right: 0px; margin-right: 15px; } /* navbar items */ .main-menu.tab > li { list-style: none; display: inline-block; position: relative; min-width: 150px; padding: 0.5em; margin: 0px 5px; font-size: 16pt; text-align: center; text-transform: uppercase; line-height: 1.3em; } /* submenu container */ .dropdown.container { display: none; } /*------------------ Navbar Text ------------------*/ a { text-decoration: none; } .main-menu.tab a { color: #2ec4b6; } .dropdown.container a { color: #ffffff; font-weight: 300; text-transform: capitalize; } /*------------------- Hover Styles -------------------*/ /* main menu items */ .main-menu.tab > li:hover > a { color: #26a195; } /* submenu title */ li.dropdown.tab:hover > a { color: #cbf3f0; } /* submenu title background */ .dropdown.tab:hover { background: #26a195; } /* submenu container */ .dropdown.tab:hover .dropdown.container { display: block; position: absolute; top: 2.3em; /* 1.3em + 2 * 0.5em */ left: 0px; margin-top: -1px; padding: 1em 0em; background: #2ec4b6; } /* submenu items */ .dropdown.tab:hover li { list-style: none; line-height: 1em; text-align: left; padding: 0.5em; min-width: 150px; } /* submenu item highlight */ .dropdown.container > li:hover { background: #ff9f1c; } /**** end of header styling ****/
85
Header navigation menu with dropdown on hover (pure CSS)
By:
pixeldev
CSS3 loading animation.
Simple.
Clear.
Pure.
Simple.
* { font-family: 'Roboto',sans-serif; } h1, p { text-align: center; font-weight: 300; } h1 { font-size: 2em; } .word-spinner { font-size: 2em; height: 2em; line-height: 2em; overflow: hidden; } .word-spinner > span { display: block; } .word-spinner > span { position: relative; display: block; text-align: center; top: -100%; animation: wordspin 5s infinite; -webkit-animation: wordspin 5s infinite; } /* spinning animation */ @keyframes wordspin { 0% { top: 0%; } 33% { top: -100%; } 66% { top: -200%; } 100% { top: -300%; } } @-webkit-keyframes wordspin /*Safari and Chrome*/ { 0% { top: 0%; } 33% { top: -100%; } 66% { top: -200%; } 100% { top: -300%; } } /* loader div */ #loader2 { width: 16em; height: 16em; margin: 6em auto 6em auto; font-size: 12px; background-color: white; border-left: 1.6em solid #3399FF; border-right: 1.6em solid #3399FF; border-top: 1.6em solid transparent; border-bottom: 1.6em solid transparent; border-radius: 100%; -webkit-border-radius: 100%; animation: loader 1s infinite; -webkit-animation: loader 1s infinite; } /* spinning animation */ @keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes loader /*Safari and Chrome*/ { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } .ownlink { color: #3399FF; text-decoration: none; font-style: italic; }
84
Loading Animation v2
By:
pixeldev
* { margin: 0; padding: 0; box-sizing: border-box; border: none; outline: none; } body { margin: 0; padding: 0; } .loader { width: 100%; height: 100%; background-color: #f0f0f0; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; } .loader-container { width: 120px; height: 120px; } .loader-block { width: 16px; height: 16px; background-color: #ff2d37; border-radius: 3px; margin-right: 10px; margin-bottom: 10px; position: relative; float: left; animation: wave 1.5s infinite; } .loader-block:nth-child(4n + 2) { animation-delay: 0.2s; } .loader-block:nth-child(4n + 3) { animation-delay: 0.4s; } .loader-block:nth-child(4n + 4) { animation-delay: 0.6s; } /* Create a wave animation */ @keyframes wave { 0% { top: 0; opacity: 1; } 50% { top: 30px; opacity: 0.2; } 100% { top: 0; opacity: 1; } }
83
Wavy Preloader Animation
By:
pixeldev
* { padding: 0; margin: 0; box-sizing: border-box; } .container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); justify-items: center; align-items: center; background-color: #111; } /* Style One */ .one { width: 100px; transform-origin: center; animation: rotate 4s linear infinite; } .one circle { fill: none; stroke: red; stroke-width: 10; stroke-dasharray: 1, 20; } @keyframes rotate { 100% { transform: rotate(360deg); } } .lines { width: 100px; height: 100px; position: relative; } /* Style Two */ .l2 { display: flex; justify-content: space-around; align-items: center; } .l2 .line { height: 20px; width: 4px; background-color: #fff; animation: topBottom 800ms linear infinite; } .l2 .line:nth-child(1) { animation-delay: 0s; } .l2 .line:nth-child(2) { animation-delay: 0.2s; } .l2 .line:nth-child(3) { animation-delay: 0.4s; } .l2 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes topBottom { 0% { transform: translateY(0px); } 25% { transform: translateY(40px); } 75% { transform: translateY(-40px); } 100% { transform: translateY(0px); } } /* Style Three*/ .l3 { display: flex; justify-content: space-around; align-items: center; } .l3 .line { height: 0px; width: 4px; left: 0px; background-color: #fff; animation: expand 900ms ease infinite; } .l3 .line:nth-child(1) { animation-delay: 0s; } .l3 .line:nth-child(2) { animation-delay: 0.2s; } .l3 .line:nth-child(3) { animation-delay: 0.4s; } .l3 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expand { 0%, 100% { height: 0px; } 50% { height: 40px; } } /* Style Four*/ .l4 { display: flex; justify-content: space-around; align-items: center; } .l4 .line { height: 2px; width: 4px; background-color: #fff; transform-origin: bottom; animation: expandTop 900ms ease infinite; } .l4 .line:nth-child(1) { animation-delay: 0s; } .l4 .line:nth-child(2) { animation-delay: 0.2s; } .l4 .line:nth-child(3) { animation-delay: 0.4s; } .l4 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expandTop { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(20); } } /* Style five*/ .l5 { display: flex; justify-content: space-around; align-items: center; } .l5 .line { height: 20px; width: 4px; background-color: orange; animation: blink 1s ease infinite; } .l5 .line:nth-child(1), .l5 .line:nth-child(10) { animation-delay: 0.8s; } .l5 .line:nth-child(2), .l5 .line:nth-child(9) { animation-delay: 0.6s; } .l5 .line:nth-child(3), .l5 .line:nth-child(8) { animation-delay: 0.4s; } .l5 .line:nth-child(4), .l5 .line:nth-child(7) { animation-delay: 0.2s; } .l5 .line:nth-child(6), .l5 .line:nth-child(5) { animation-delay: 0s; } @keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Style Six*/ .l6 { display: flex; justify-content: space-around; align-items: center; overflow: hidden; position: relative; height: 20px; background-color: blue; } .l6 .line:nth-child(1) { position: absolute; left: 0; bottom: 0; height: 10px; width: 100%; background-color: #fff; animation: expandRight 2s ease infinite; } .l6 .line:nth-child(2) { position: absolute; right: 0; top: 0; height: 10px; width: 100%; animation: expandLeft 2s ease infinite; background-color: #fff; } @keyframes expandRight { 0% { transform-origin: left; transform: translateX(0%); } 50% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes expandLeft { 0% { transform-origin: right; transform: translateX(100%); } 50% { transform: translateX(0%); transform-origin: left; } 100% { transform: translateX(100%); } } /* Style Seven */ .l7 { position: relative; width: 80px; height: 80px; animation: 900ms linear rotateMain infinite; } .l7 .line { position: absolute; background-color: #fff; } .l7 .line:nth-child(1) { left: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(2) { right: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(3) { left: 40px; animation: 600ms ease-in growHeight infinite; } .l7 .line:nth-child(4) { left: 40px; bottom: 0px; animation: 600ms ease-in growHeight infinite; } @keyframes growHeight { 0%, 100% { height: 0px; width: 2px; } 50% { height: 40px; width: 2px; } } @keyframes growWidth { 0%, 100% { width: 0px; height: 2px; } 50% { width: 40px; height: 2px; } } @keyframes rotateMain { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Style Eight*/ .l8 { display: flex; justify-content: space-around; align-items: center; } .l8 .line { height: 20px; width: 4px; background-color: rgb(255, 0, 76); animation: growLine 1s ease infinite; } .l8 .line:nth-child(1), .l8 .line:nth-child(10) { animation-delay: 0.8s; } .l8 .line:nth-child(2), .l8 .line:nth-child(9) { animation-delay: 0.6s; } .l8 .line:nth-child(3), .l8 .line:nth-child(8) { animation-delay: 0.4s; } .l8 .line:nth-child(4), .l8 .line:nth-child(7) { animation-delay: 0.2s; } .l8 .line:nth-child(6), .l8 .line:nth-child(5) { animation-delay: 0s; } @keyframes growLine { 0%, 100% { transform: scale(0); } 50% { transform: scale(1.5); } } .circle-loader { width: 80px; height: 80px; border: 8px solid #333; border-top: 8px solid red; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
82
8 Pre loader animation using css
By:
pixeldev
/* Inspirated from http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html */ .ouro { position: relative; display:inline-block; height: 46px; width: 46px; margin: 1em; border-radius: 50%; background: none repeat scroll 0 0 #DDDDDD; overflow:hidden; box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075); } .ouro:after { content: ""; position: absolute; top: 9px; left: 9px; display: block; height: 28px; width: 28px; background: none repeat scroll 0 0 #F2F2F2; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.1); } .ouro > span { position: absolute; height: 100%; width: 50%; overflow: hidden; } .left { left:0 } .right { left:50% } .anim { position: absolute; left: 100%; top: 0; height: 100%; width: 100%; border-radius: 999px; background: none repeat scroll 0 0 #508EC3; opacity: 0.8; -webkit-animation: ui-spinner-rotate-left 3s infinite; animation: ui-spinner-rotate-left 3s infinite; -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0; } .left .anim { border-bottom-left-radius: 0; border-top-left-radius: 0; } .right .anim { border-bottom-right-radius: 0; border-top-right-radius: 0; left: -100%; -webkit-transform-origin: 100% 50% 0; transform-origin: 100% 50% 0; } /* v2 */ .ouro2 .anim { -webkit-animation-delay:0; animation-delay:0; } .ouro2 .right .anim{ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } /* v3 */ .ouro3 .anim { -webkit-animation-delay: 0s; -webkit-animation-duration:3s; -webkit-animation-timing-function: linear; animation-delay: 0s; animation-duration:3s; animation-timing-function: linear; } .ouro3 .right .anim{ -webkit-animation-name: ui-spinner-rotate-right; -webkit-animation-delay:0; -webkit-animation-delay: 1.5s; animation-name: ui-spinner-rotate-right; animation-delay:0; animation-delay: 1.5s; } /* round variation */ .round .ouro:after {display:none } /* double variation */ .double .ouro:after { height: 13px; width: 13px; left: 7px; top: 7px; border: 10px solid #ddd; background: transparent; box-shadow: none; } @keyframes ui-spinner-rotate-right{ 0%{transform:rotate(0deg)} 25%{transform:rotate(180deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(360deg)} 100%{transform:rotate(360deg)} } @keyframes ui-spinner-rotate-left{ 0%{transform:rotate(0deg)} 25%{transform:rotate(0deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-right{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(180deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(360deg)} 100%{-webkit-transform:rotate(360deg)} } @-webkit-keyframes ui-spinner-rotate-left{ 0%{-webkit-transform:rotate(0deg)} 25%{-webkit-transform:rotate(0deg)} 50%{-webkit-transform:rotate(180deg)} 75%{-webkit-transform:rotate(180deg)} 100%{-webkit-transform:rotate(360deg)} } /* * Some bugs with Chrome (Android), Safari and Opera, I'll try to see how http://atomeye.com/projects/sass-css-spinner.html made his code. */ /* presentation styles */ html {height: 100%} body { text-align:center; background: radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; background: -webkit-radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; height: 100%; display:table; width:100%} .block {display: table-cell; vertical-align:middle} h1, a { margin-top: 1em; font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial; color: #888; font-weight: lighter;} .info {margin-top: 25px} .info a {font-size: 12px; color: #999} .info br + a {text-decoration:none}
81
Circle Loader v2
By:
pixeldev
.loader { border: 8px; border-top: 4px dotted #FF0035; border-radius:50%; width: 120px; height: 120px; animation: spin 3s linear infinite; margin: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 0% {background-color:#FF0035 ; opacity: 0.2;} 30% {background-color:white; opacity: 1.0;} 70% {background-color:white; opacity: 1.0;} 100% {background-color: #FF0035; opacity: 0.2;} } }
81
Red loading animation
By:
pixeldev
header
nav
section
/* Note: This example only works with Windows Insider Preview Builds 16237+ or the Fall Creators Update. */ body { font-family: segoe-ui_normal,Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif; display: grid; grid-template-areas: "header header header" "nav section aside" "footer footer footer"; grid-template-rows: 80px 1fr 50px; grid-template-columns: 15% 1fr 18%; grid-gap: 5px; height: 100vh; margin: 10px; } header { background: #707070; grid-area: header; } nav { background: #C9BFBF; grid-area: nav; } section { background: #ABABAB; grid-area: section; } aside { background: #C9C9C9; grid-area: aside; } footer { background: #707070; grid-area: footer; } header, nav, section, aside, footer { padding: 5px; }
79
CSS Grid Layout
By:
pixeldev
Navigation CSS Menu
Home
About
Blog
Portefolio
Contact
nav { margin: 27px auto 0; position: relative; width: 590px; height: 50px; background-color: #34495e; border-radius: 8px; font-size: 0; } nav a { line-height: 50px; height: 100%; font-size: 15px; display: inline-block; position: relative; z-index: 1; text-decoration: none; text-transform: uppercase; text-align: center; color: white; cursor: pointer; } nav .animation { position: absolute; height: 100%; top: 0; z-index: 0; transition: all .5s ease 0s; border-radius: 8px; } a:nth-child(1) { width: 100px; } a:nth-child(2) { width: 110px; } a:nth-child(3) { width: 100px; } a:nth-child(4) { width: 160px; } a:nth-child(5) { width: 120px; } nav .start-home, a:nth-child(1):hover~.animation { width: 100px; left: 0; background-color: #1abc9c; } nav .start-about, a:nth-child(2):hover~.animation { width: 110px; left: 100px; background-color: #e74c3c; } nav .start-blog, a:nth-child(3):hover~.animation { width: 100px; left: 210px; background-color: #3498db; } nav .start-portefolio, a:nth-child(4):hover~.animation { width: 160px; left: 310px; background-color: #9b59b6; } nav .start-contact, a:nth-child(5):hover~.animation { width: 120px; left: 470px; background-color: #e67e22; } body { font-size: 12px; font-family: sans-serif; background: #2c3e50; } h1 { text-align: center; margin: 40px 0 40px; text-align: center; font-size: 30px; color: #ecf0f1; text-shadow: 2px 2px 4px #000000; font-family: 'Cherry Swash', cursive; } p { position: absolute; bottom: 20px; width: 100%; text-align: center; color: #ecf0f1; font-family: 'Cherry Swash',cursive; font-size: 16px; } span { color: #2BD6B4; }
79
Navigation Menu
By:
pixeldev
body { width: 100%; height: 100%; margin: 0; padding: 0; } #ms-container { width: 100%; height: 100vh; background: #1c9cf2; } .ms-content { position: absolute; width: 200px; height: 200px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 10px solid #2ea4f2; border-radius: 100%; } .ms-content-inside { width: 100%; height: 100%; position: relative; } .ms-line-down-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: rotate(0deg); transition: transform 0s ease; } #ms-download { display: none; } #ms-download:checked ~ .ms-line-down-container { transform: rotate(-360deg); transition: transform 1.5s ease 1.25s; } .ms-line-down { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 10px; height: 125px; background: #FFFFFF; border-radius: 50px; transition: height .5s ease; } #ms-download:checked ~ .ms-line-down-container .ms-line-down { height: 10px; top: -20px; animation: ms-bounce .5s forwards .55s; } #ms-download:checked ~ .ms-line-down-container .ms-line-down:before { content: ''; position: absolute; top: 0; left: -94px; right: 0; bottom: 0; width: 200px; height: 200px; border: 10px solid transparent; border-radius: 100%; animation: ms-border-fill .5s forwards 3s; } .ms-line-point { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 58px; height: 130px; transition: height .15s ease .45s; } #ms-download:checked ~ .ms-line-point { height: 60px; } #ms-download:checked ~ .ms-line-point:before { transform: rotate(90deg); right: -10px; animation: ms-check-right .25s forwards 3s; } #ms-download:checked ~ .ms-line-point:after { transform: rotate(-90deg); left: -10px; animation: ms-check-left .25s forwards 3s; } .ms-line-point:before, .ms-line-point:after { content: ''; position: absolute; width: 10px; height: 75px; bottom: -10px; background: #FFFFFF; border-radius: 50px; transition: transform .15s ease .47s, left .15s ease .47s, right .15s ease .47s; } .ms-line-point:before { right: 0px; transform: rotate(45deg); } .ms-line-point:after { left: 0px; transform: rotate(-45deg); } @keyframes ms-bounce { 0% { top: -20px; } 25% { top: -250px; } 50% { top: -275px; } 100% { top: -190px; } } @keyframes ms-check-left { 0% { transform: rotate(-90deg); left: -10px; height: 75px; } 100% { transform: rotate(-45deg); left: 0px; height: 45px; } } @keyframes ms-check-right { 0% { transform: rotate(90deg); right: -10px; height: 75px; bottom: -10px; } 100% { transform: rotate(45deg); right: 10px; height: 80px; bottom: -15px; } } @keyframes ms-border-fill { 0% { border: 10px solid transparent; } 100% { border: 10px solid #FFFFFF; } }
79
Download Animation
By:
pixeldev
Hover me
body{ } button { text-transform: uppercase; border: 2px solid #1E1A3E; background: rgb(112, 204, 243); color: #1E1A3E; padding: 10px; font-size: 58px; position: relative; box-sizing: border-box; transition: all 100ms ease; z-index: 1; padding: 10px 35px; } button:before { content:''; position: absolute; top: 0px; left: 0px; width: 0px; height: 88px; background: rgba(30, 26, 62, 1); transition: all 500ms ease; color: white !important; } button:hover:before { width: 100%; z-index: -1; } button:hover{ color:white; }
77
Button Hover
By:
pixeldev
Previous
1
2
3
4
5
6
…
24
Next