Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
button
Hover
APPLY
Try For Free
Let's Try Now
.flex{ display:flex; flex-wrap:wrap; justify-content: center; } .btn{ padding: 20px; } /* 1 button styles*/ .button { border: 2px solid black; border-radius: 7px; padding:5px 25px; text-decoration: none; display: inline-block; line-height:1.6; background: linear-gradient(to right, black 50%, white 50%); background-size: 200% 100%; background-position: right bottom; transition: all .5s ease-out; } .button:hover { background-position: left bottom; } .text { text-align: center; font-size: 20px; line-height: 1.6; color: black; transition: all .5s ease-out; } .text:hover { color: white; } /* 2 button styles*/ .button-an { display: inline-block; border-radius: 7px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 16px; padding: 15px 25px; width:75px; transition: all 0.5s; cursor: pointer; } .button-an span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button-an span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button-an:hover span { padding-right: 25px; } .button-an:hover span:after { opacity: 1; right: 0; } /*3 btn styles*/ .primary-btn { text-decoration:none; width: 150px; position: relative; display: inline-block; border-radius: 30px; background-color: transparent; color: #212490; text-align: center; font-size: 18px; font-weight:600; padding: 12px 0; transition: all 0.3s; padding-right: 30px; box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.06); border: 1px solid #212490; } .primary-btn .btn-icon { background-color: #212490; width: 80px; height: 45px; float: right; position: absolute; border-radius: 30px 30px 30px 0; right: 0px; top: 0px; transition: all 0.3s; } .btn-text { position: relative; z-index: 9999; } .btn-icon::after { content: ""; width: 0; height: 0; border-top: 45px solid #fff; border-right: 35px solid transparent; position: absolute; top: 0px; left: 0px; } .primary-btn:hover .btn-icon { width: 100%; border-radius: 30px; } .primary-btn:hover .btn-icon::after { display: none; opacity: 0.1; } .btn-icon i { position: absolute; right: 25px; top: 12px; color: #fff; } .primary-btn:hover { color: #fff!important; text-decoration:none; } /*4 button styles*/ .st-btn_main:focus,.st-btn_main:hover{ text-decoration:none; } .st-btn_main{ padding:0 27px; height:49px; display:inline-flex; justify-content:center; align-items:center; font-size:14px; font-weight:600; text-transform:capitalize; border-radius:7px; overflow:hidden; transform:translateZ(0); color:white; } .st-btn_main:before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:450px; height:450px; margin:auto; background:#471fac; border-radius:50%; border:40px solid #0a064c; z-index:2; transform-origin:top center; transform:translateX(-50%) translateY(-5%) scale(.4); transition:transform .8s,border .7s; } .st-btn_main:after{ content:''; position:absolute; top:1px; right:1px; bottom:1px; left:1px; background:#E49349; border-radius:inherit; transform-origin:bottom center; transform:translateZ(0);overflow:hidden; } .st-btn_main p{ display:inline-block; overflow:hidden; } .st-btn_main p span{ position:relative; display:inline-block; transform:translateZ(0); z-index:3; } .st-btn_main:hover:before{ transform:translateX(-45%) translateY(0) scale(1); transform-origin:bottom center; border:60px solid #0a064c; transition:border .8s,-webkit-transform .9s; transition:transform .9s,border .8s; } /* 5 btn styles */ .glow-on-hover { padding: 15px 25px; text-decoration: none; border: none; outline: none; display: inline-block; color: #fff; background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 100px; } .glow-on-hover:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 100px; } .glow-on-hover:active { color: #000 } .glow-on-hover:active:after { background: transparent; } .glow-on-hover:hover:before { opacity: 1; } .glow-on-hover:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #111; left: 0; top: 0; border-radius: 100px; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } @keyframes wobble{0%{transform:skewX(0deg)}25%{transform:skewX(10deg)}50%{transform:skewX(0deg)}75%{transform:skewX(-10deg)}100%{transform:skewX(0deg)}}
62
Animation: Buttons Hover
By:
rald_dev
body{ background: #111; display: flex; height: 100vh; place-content: center; align-items: center; } .wrapper { background: #fff; position: relative; } .wrapper #motion-demo { offset-path: path("M 0 0 m 0 -37.5 a 37.5 37.5 90 1 0 0 75 a 37.5 37.5 90 1 0 0 -75"); animation: move infinite cubic-bezier(.71,.54,.26,.8); width: 6px; height: 6px; border-radius: 10px; position: absolute; } #motion-demo:nth-of-type(1) { background: #bada55; animation-duration: 1.2s; animation-delay: .1s; } #motion-demo:nth-of-type(2) { background: dodgerblue; animation-duration: 1.2s; animation-delay: .2s; } #motion-demo:nth-of-type(3) { background: springgreen; animation-duration: 1.1s; animation-delay: .3s; } #motion-demo:nth-of-type(4) { background: orangered; animation-duration: 1s; animation-delay: .4s; } #motion-demo:nth-of-type(5) { background: orange; animation-duration: 1s; animation-delay: .45s; } #motion-demo:nth-of-type(6) { background: violet; animation-duration: 1s; animation-delay: .5s; } #motion-demo:nth-of-type(7) { background: orangered; animation-duration: 1s; animation-delay: .55s; } #motion-demo:nth-of-type(8) { background: orange; animation-duration: 1s; animation-delay: .6s; } @keyframes move { 0% { offset-distance: 0%; } 50%{ opacity: 0.5; } 100% { offset-distance: 100%; } }
62
Rainbow Loader Animation
By:
rald_dev
Bouncy
body { font-family: arial; background: -webkit-radial-gradient(circle, #757462, #272623); background: -moz-radial-gradient(circle, #757462, #272623); } h1 { -webkit-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounceSide .5s cubic-bezier(.63,.09,.75,.46) infinite alternate; position: relative; float: left; color: white; } .object-1 { position: absolute; width: 100px; height: 100px; border-radius: 50%; left: 50%; background: #ffcc00; -webkit-animation: bounce .3s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .3s cubic-bezier(.63,.09,.75,.46) infinite alternate; } .object-2 { position: absolute; width: 100px; height: 100px; border-radius: 50%; left: 25%; background: #00ccff; -webkit-animation: bounce .7s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .7s cubic-bezier(.63,.09,.75,.46) infinite alternate; } .object-3 { position: absolute; width: 100px; height: 100px; border-radius: 10%; left: 75%; background: #00cc00; -webkit-animation: bounce .2s cubic-bezier(.63,.09,.75,.46) infinite alternate; -moz-animation: bounce .2s cubic-bezier(.63,.09,.75,.46) infinite alternate; } @-webkit-keyframes bounce { 0%, 10% { top: 10px; height: 100px; width: 100px; } 15% { height: 103px; width: 97px; } 35% { height: 105px; width: 95px; } 75% { height: 107px; width: 95px; } 85% { height: 107px; width: 95px; } 100% { top: 200px; height: 80px; width: 105px; } } @-moz-keyframes bounce { 0%, 10% { top: 10px; height: 100px; width: 100px; } 15% { height: 103px; width: 97px; } 35% { height: 105px; width: 95px; } 75% { height: 107px; width: 95px; } 85% { height: 107px; width: 95px; } 100% { top: 200px; height: 80px; width: 105px; } } @-webkit-keyframes bounceSide { 0% { left: 10px; } 100% { left: 200px; } } @-moz-keyframes bounceSide { 0% { left: 10px; } 100% { left: 200px; } }
61
Bouncing
By:
rald_dev
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
html, body { margin: 0px; } header, footer { font-family: Raleway; margin: 0 auto; padding: 5em 3em; text-align: center; background: #555; } header h1 { color: #AAA; font-size: 40px; font-weight: lighter; margin-bottom: 5px; } header span { color: #222; } footer span { color: #AAA; } div.container { font-family: Raleway; margin: 0 auto; padding: 10em 3em; text-align: center; } div.container a { color: #FFF; text-decoration: none; font: 20px Raleway; margin: 0px 10px; padding: 10px 10px; position: relative; z-index: 0; cursor: pointer; } .red { background: #f44336; } .purple { background: #673ab7; } .indigo { background: #3f51b5; } .blue { background: #2196f3; } .cyan { background: #00bcd4; } .teal { background: #009688; } .green { background: #4caf50; } .lightGreen { background: #8bc34a; } .lime { background: #c0ca33; } .yellow { background: #fdd835; } .amber { background: #ffc107; } .orange { background: #ff9800 } .deepOrange { background: #ff5722; } .brown { background: #795548; } .gray { background: #9e9e9e; } /* Top and Bottom borders go out */ div.topBotomBordersOut a:before, div.topBotomBordersOut a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersOut a:before { top: 0px; transform: translateY(10px); } div.topBotomBordersOut a:after { bottom: 0px; transform: translateY(-10px); } div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after { opacity: 1; transform: translateY(0px); } /* Top and Bottom borders come in */ div.topBotomBordersIn a:before, div.topBotomBordersIn a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersIn a:before { top: 0px; transform: translateY(-10px); } div.topBotomBordersIn a:after { bottom: 0px; transform: translateY(10px); } div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after { opacity: 1; transform: translateY(0px); } /* Top border go down and Left border appears */ div.topLeftBorders a:before { position: absolute; top: 0px; left: 0px; width: 2px; height: 0px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:after { position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:hover:before { height: 100%; } div.topLeftBorders a:hover:after { opacity: 0; top: 100%; } /* Circle behind */ div.circleBehind a:before, div.circleBehind a:after { position: absolute; top: 22px; left: 50%; width: 50px; height: 50px; border: 4px solid #0277bd; transform: translateX(-50%) translateY(-50%) scale(0.8); border-radius: 50%; background: transparent; content: ""; opacity: 0; transition: all 0.3s; z-index: -1; } div.circleBehind a:after { border-width: 2px; transition: all 0.4s; } div.circleBehind a:hover:before { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } div.circleBehind a:hover:after { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.3); } /* Brackets go out */ div.brackets a:before, div.brackets a:after { position: absolute; opacity: 0; font-size: 35px; top: 0px; transition: all 0.3s; } div.brackets a:before { content: '('; left: 0px; transform: translateX(10px); } div.brackets a:after { content: ')'; right: 0px; transform: translateX(-10px); } div.brackets a:hover:before, div.brackets a:hover:after { opacity: 1; transform: translateX(0px); } /* Border from Y to X */ div.borderYtoX a:before, div.borderYtoX a:after { position: absolute; opacity: 0.5; height: 100%; width: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderYtoX a:before { left: 0px; top: 0px; } div.borderYtoX a:after { right: 0px; bottom: 0px; } div.borderYtoX a:hover:before, div.borderYtoX a:hover:after { opacity: 1; height: 2px; width: 100%; } /* Border X get width */ div.borderXwidth a:before, div.borderXwidth a:after { position: absolute; opacity: 0; width: 0%; height: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderXwidth a:before { left: 0px; top: 0px; } div.borderXwidth a:after { right: 0px; bottom: 0px; } div.borderXwidth a:hover:before, div.borderXwidth a:hover:after { opacity: 1; width: 100%; } /* Pull down */ div.pullDown a:before { position: absolute; width: 100%; height: 2px; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullDown a:hover:before { height: 100%; } /* Pull up */ div.pullUp a:before { position: absolute; width: 100%; height: 2px; left: 0px; bottom: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUp a:hover:before { height: 100%; } /* Pull right */ div.pullRight a:before { position: absolute; width: 2px; height: 100%; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRight a:hover:before { width: 100%; } /* Pull left */ div.pullLeft a:before { position: absolute; width: 2px; height: 100%; right: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullLeft a:hover:before { width: 100%; } /* Pull up and down */ div.pullUpDown a:before, div.pullUpDown a:after { position: absolute; width: 100%; height: 2px; left: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUpDown a:before { top: 0px; } div.pullUpDown a:after { bottom: 0px; } div.pullUpDown a:hover:before, div.pullUpDown a:hover:after { height: 100%; } /* Pull right and left */ div.pullRightLeft a:before, div.pullRightLeft a:after { position: absolute; width: 2px; height: 100%; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRightLeft a:before { left: 0px; } div.pullRightLeft a:after { right: 0px; } div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after { width: 100%; } /* Highlight text out */ div.highlightTextOut a { color: rgba(255, 255, 255, 0.3); } div.highlightTextOut a:before, div.highlightTextIn a:before { position: absolute; color: #FFF; top: 0px; left: 0px; padding: 10px; overflow: hidden; content: attr(alt); transition: all 0.3s; transform: scale(0.8); opacity: 0; } div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before { transform: scale(1); opacity: 1; } /* Highlight text in */ div.highlightTextIn a { color: rgba(0, 0, 0, 0.4); } div.highlightTextIn a:before { transform: scale(1.2); }
61
Navigation Animation
By:
rald_dev
body { background-color:black; } #animation-container { height:100px; width:100px; position:relative; } #glowstick { background-color:deeppink; height:30px; width:1px; position:absolute; top:20%; left:50%; opacity:0; -webkit-transform-origin:bottom center; transform-origin:bottom center; -webkit-animation:spin 1.2s infinite; animation:spin 1.2s infinite; box-shadow:-3px 0px 20px 1px deeppink; } @-webkit-keyframes spin { 50% { opacity:1; } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 50% { opacity:1; } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
61
Glow Loader
By:
rald_dev
Home
Chat
Products
Exit
body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; background: #111111; color: #fff; } .card { background: #483d8b; width: 300px; height: 160px; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .menu li { display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-right: 40px; list-style: none; width: 180px; height: 30px; cursor: pointer; } .item a { color: white; } ion-icon { position: relative; left: -50px; color: #fff; font-size: 18px; } a { position: absolute; margin-left: 12px; text-decoration: none; color: #000; } li.item:hover { background: #7b68ee; border: 1px solid #fff; color: white; margin-left: 28px; transition: 0.4s; } p { font-size: 12px; }
61
Button hover with card
By:
rald_dev
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*/
61
Gradient Button with Animation
By:
rald_dev
:hover, please
Now here
Around and inside I
Around and inside II
:hover with animation
*, *:after, *:before { box-sizing: border-box; -moz-box-sizing: border-box; } * {margin:0;padding:0;border:0 none;position: relative; outline: none; } html, body { background: #004050; font-family: Quando; font-weight: 300; width: 100%; } h2, h3 { background: #0D757D; width: 100%; min-height: 200px; line-height: 200px; font-size: 3rem; font-weight: normal; text-align: center; color: rgba(0,0,0,.4); margin: 3rem auto 0; } .uno {background: #ff5e33;} .dos.bis {background: #85144B;} .dos {background: #FADD40;} h3 {background: #2B5B89;} h2 > a, h3 > a { text-decoration: none; color: rgba(0,0,0,.4); z-index: 1; } h2 > a:before { content: ""; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; background: #9CF5A6; visibility: hidden; border-radius: 5px; transform: scaleX(0); transition: .25s linear; } h2 > a:hover:before, h2 > a:focus:before { visibility: visible; transform: scaleX(1); } .uno a:before { background: rgba(0,0,0,0); box-shadow: 0 0 10px 2px #ffdb00; } .dos > a:after { content: ""; position: absolute; width: 100%; height: 7px; border: 1px solid #000; bottom: -2px; left: 0; background: #fff; border-radius: 5px; opacity: 0; transform: scalex(0); transition: .5s; } .dos.bis > a:after { opacity: .05; transform: scalex(1); } .dos:hover > a:after { opacity: .15; transform: scalex(1); } .dos.bis > a:before { background: rgba(0,0,0,0); box-shadow: 0 0 10px 2px #FADD40; } .dos > a:before { background: rgba(0,0,0,0); box-shadow: 0 0 10px 2px #FF5E33; } h3 > a:before { content: ""; background: #7FDBFF; position: absolute; width: 100%; height: 5px; bottom: 0; left: 0; border-radius: 5px; transform: scaleX(0); animation: 1.4s forwards no-hover-v linear; animation-fill-mode: forwards; z-index: -1; } h3 > a:hover:before, h3 > a:focus:before { animation: .5s forwards hover-v linear; animation-fill-mode: forwards; } @keyframes hover-v { 0% { transform: scaleX(0); height: 5px; } 45% { transform: scaleX(1.05); height: 5px; } 55% {height: 5px;} 100% { transform: scaleX(1.05); height: 3.8rem; } } @keyframes no-hover-v { 0% { transform: scaleX(1.05); height: 3.8rem; } 45% {height: 5px;} 55% { transform: scaleX(1.05); height: 5px; opacity: 1; } 100% { transform: scaleX(0); height: 5px; opacity: .02; } } p {padding: .5rem;} p a {color: rgba(255,255,255,.5)}
60
text-decoration: underline animated
By:
rald_dev
body{ margin: 0; padding: 0; background-color: #95d0ff; } .container{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width:350px; height:510px; } .sun{ height: 0; width: 0; position: absolute; top: 50px; left: 20px; } .circle{ height: 44px; width: 44px; position: absolute; top: 3px; left: 3px; background-color: #ff0; border-radius: 50%; } .sunrays{ height: 50px; width: 50px; position: relative; background-color: #ffdd4a; box-shadow: 0 0 20px 3px #ff8, 0 0 80px 10px #ff6; animation: rotate 12s linear infinite; } @keyframes rotate{ 100%{transform: rotate(360deg);} } .sunrays:before{ content: ''; height: 50px; width: 50px; position: absolute; background-color: #ffdd4a; transform: rotate(30deg); } .sunrays:after{ content: ''; height: 50px; width: 50px; position: absolute; background-color: #ffdd4a; transform: rotate(60deg); } .shadow{ position: absolute; width: 110px; height: 14px; border-radius: 50%; background-color: rgba(0, 0, 0,0.1); bottom: 95px; left: 135px; } .pot{ position: absolute; width: 70px; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 60px solid #FF7043; bottom: 104px; left: 125px; z-index: 2; } .pot:before{ position: absolute; content: ''; width: 87px; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 9px solid #F4511E; top: -60px; left: -12px; } .pot:after{ position: absolute; content: ''; width: 110px; height: 18px; top: -78px; left: -20px; border-radius: 5px; background-color: #FF7043; } .water-jar{ position: absolute; width: 40px; height: 55px; background-color: #c5f; border-radius: 5px; bottom: 235px; left: 65px; opacity: 0; box-shadow: inset -9px 0 15px #cc70ff; animation: show 10s linear; } @keyframes show{ 5%{opacity: 1;} 7%{transform: rotate(40deg);} 24%{opacity: 1;} 25%{opacity: 0;} } .water-jar:before{ position: absolute; content: ''; width: 15px; height: 0; left: 40px; top: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 40px solid #c6f; transform: rotate(65deg); } .water-jar:after{ position: absolute; content: ''; width: 20px; height: 30px; top: 5px; left: -20px; border-radius: 20px 0 0 20px; background-color: transparent; border: 5px solid #c5f; box-shadow: 70px -4px 0 -6px #c6f; } .water{ position: absolute; width: 20px; height: 50px; border-radius: 50% 50% 0 0; border-right: 4px dashed #0bf; bottom: 180px; left: 115px; z-index: 1; opacity: 0; animation: water 10s linear; } @keyframes water{ 7%{opacity: 0;} 8%{opacity: 1;} 21%{opacity: 1;} 22%{opacity: 0;} } .water:before{ position: absolute; content: ''; width: 45px; height: 52px; top: -2px; left: -10px; border-radius: 70% 80% 20% 0; border-right: 4px dashed #0bf; z-index: 1; } .water:after{ position: absolute; content: ''; width: 65px; height: 62px; top: -10px; left: -10px; border-radius: 70% 90% 28% 0; border-right: 4px dashed #0bf; z-index: 1; } .flower{ position: absolute; bottom: 180px; left: 0; right: 0; margin: 0 auto; width: 50px; transform: rotate(180deg); } .stem{ position: absolute; left: 25px; width: 5px; height: 0px; background: linear-gradient(-90deg, #0d0, #0a0); animation: grow 10s linear forwards; } @keyframes grow{ 25%{height: 0;} 34%{height: 22px;} 39%{height: 22px;} 41%{height: 27px;} 45%{height: 27px;} 52%{height: 92px;} 55%{height: 94px;} 100%{height: 120px;} } .leaf{ position: absolute; width: 25px; top: -10px; left: 18px; height: 38px; border-radius: 1% 100%; background: linear-gradient(70deg, #0e0, #0a0); transform-origin: bottom; transform: rotate(-110deg); animation: leaf-1 10s linear; } @keyframes leaf-1{ 0%{transform: scaleY(0) rotate(-180deg);} 38%{transform: scaleY(0) rotate(-110deg);} 50%{transform: scaleY(1) rotate(-110deg);} } .leaf:before{ position: absolute; content: ''; top: 18px; left: -33px; width: 30px; height: 45px; border-radius: 1% 100%; background: linear-gradient(70deg, #0e0, #0a0); transform: rotate(110deg); animation: leaf-2 10s linear; } @keyframes leaf-2{ 0%{transform: scaleY(0) rotate(110deg);} 45%{transform: scaleY(0) rotate(110deg);} 52%{transform: scaleY(1) rotate(110deg);} } .leaf:after{ position: absolute; content: ''; top: -20px; left: -60px; width: 25px; height: 35px; border-radius: 1% 100%; background: linear-gradient(70deg, #0e0, #0a0); transform-origin: bottom; animation: leaf-3 10s linear; } @keyframes leaf-3{ 0%{transform: scaleY(0);} 55%{transform: scaleY(0);} 72%{transform: scaleY(1);} } .dot{ position: absolute; top: 147px; left: 24px; height: 15px; width: 15px; border-radius: 50%; background-color: #f8d545; box-shadow: 0 0 0 4px #d85, 0 0 8px 4px #444, inset 0 0 8px #fd0; opacity: 0; animation: flower 10s linear forwards; } @keyframes flower{ 72%{opacity: 0;} 74%{opacity: 1;} 100%{opacity: 1;} } .petal{ position: absolute; width: 0px; height: 40px; border-radius: 100% 0% 50% 50% /50% 0% 100% 50%; background: linear-gradient( 185deg, #941346 0%, #E63B94 50%, #FF5AB0 75%, #FF7DC1 100% ); opacity: 0; animation: petal 10s linear forwards; } @keyframes petal{ 72%{opacity: 0;} 84%{opacity: 1; width: 40px;} 100%{opacity: 1; width: 40px;} } .petal-1{ top: 155px; left: -9px; } .petal-2{ top: 125px; left: -18px; transform: rotate(60deg); } .petal-3{ top: 105px; left: 5px; transform: rotate(120deg); } .petal-4{ top: 110px; left: 35px; transform: rotate(180deg); } .petal-5{ top: 140px; left: 42px; transform: rotate(240deg); } .petal-6{ top: 160px; left: 18px; transform: rotate(300deg); }
60
Growing Flower Plant Animation
By:
rald_dev
* { 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); } }
60
8 Pre loader animation using css
By:
rald_dev
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; }
60
CSS Grid Layout
By:
rald_dev
body{ background: #1d1e22; } .container{ width: 20px; position: relative; margin: auto; top: 20vh; } .ball{ --radius: calc(200px + var(--n)*10px); top: var(--radius); transform-origin: 0 calc(-1 * var(--radius)); position: absolute; width: 20px; height: 20px; border-radius: 10px; border: 1px solid #000; background: #ffad4a; animation: oscillation calc(60s / (50 + var(--n))) ease-in-out infinite alternate; } .ball::before{ content: ""; position: absolute; top: calc(-1*var(--radius)); left: 50%; transform: translate(-50%); width: 1px; height: var(--radius); background: black; } .ball1{--n:1}.ball2{--n:2}.ball3{--n:3}.ball4{--n:4}.ball5{--n:5}.ball6{--n:6}.ball7{--n:7}.ball8{--n:8}.ball9{--n:9}.ball10{--n:10}.ball11{--n:11}.ball12{--n:12}.ball13{--n:13}.ball14{--n:14}.ball15{--n:15} @keyframes oscillation { from { transform: rotate(20deg); } to{ transform: rotate(-20deg); } }
60
Pendulum Wave
By:
rald_dev
Previous
1
…
3
4
5
6
7
…
10
Next