How to create Hover animations on Button ?
In this project, we are going to create animated buttons using HTML and CSS. In these buttons when we hover over them an emoji get displayed on them for better UX.
A glimpse of the Buttons:
CDN Link: For button icons, we will use the fontawesome CDN link. Place this link in the script tag.
https://kit.fontawesome.com/704ff50790.js
HTML: Create an HTML file, then create the structure of all the buttons that will be a hover effect(switch to icon). Create a div container inside that container place all the buttons.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> </ head > < body > < div class = "container" > < div class = "button-effect" > < h2 >Animated Buttons on Hover</ h2 > < a class = "effect effect-4" href = "#" title = "Confirm Delivery" > Confirm Delivery </ a > < a class = "effect effect-3" href = "#" title = "Download" >Download</ a > < a class = "effect effect-2" href = "#" title = "Upload" >Upload</ a > < a class = "effect effect-1" href = "#" title = "Delete" >Delete</ a > < a class = "effect effect-5" href = "#" title = "Click Here to Message" > Message </ a > </ div > </ div > < script src = "https://kit.fontawesome.com/704ff50790.js" crossorigin = "anonymous" > </ script > </ body > </ html > |
CSS: It is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.
- Restore all the browser effects.
- Use classes and ids to give effects to HTML elements.
- Use @keyframes{} for giving the animation to HTML elements.
- Use of nth-child selector feature of CSS to call different links.
CSS
body { background-color : black ; } body .container { width : 850px ; margin : 70px auto 0px auto ; text-align : center ; } body .container .button-effect { padding : 30px 0px ; } body .container .button-effect h 2 { font-family : "Droid Serif" , serif ; font-size : 20px ; color : #fff ; margin-bottom : 40px ; } body .container .button-effect a { margin-right : 17px ; } body .container .button-effect a:nth-child( 2 ) { background-color : #520a8d ; } body .container .button-effect a:nth-child( 3 ) { background-color : #4d0325 ; } body .container .button-effect a:nth-child( 4 ) { background-color : #09858a ; } body .container .button-effect a:nth-child( 5 ) { background-color : #e60d2a ; } body .container .button-effect a:nth-child( 6 ) { background-color : #c45f0d ; } body .container .button-effect a:last-child { margin-right : 0px ; } .effect { text-align : center ; display : inline- block ; position : relative ; text-decoration : none ; color : #fff ; text-transform : capitalize ; /* background-color: - add your own background-color */ font-family : "Roboto" , sans-serif ; /* put your font-family */ font-size : 18px ; padding : 20px 0px ; width : 150px ; border-radius: 6px ; overflow : hidden ; } /* effect-4 styles */ .effect.effect -4 { transition: all 0.2 s linear 0 s; } .effect.effect -4: before { content : "\f0d1" ; font-family : FontAwesome; display : flex; align-items: center ; justify- content : center ; position : absolute ; top : 0 ; left : 0px ; width : 100% ; height : 100% ; text-align : center ; font-size : 30px ; transform: scale( 0 , 1 ); transition: all 0.2 s linear 0 s; } .effect.effect -4: hover { text-indent : -9999px ; } .effect.effect -4: hover:before { transform: scale( 1 , 1 ); text-indent : 0 ; } .effect.effect -3 { transition: all 0.2 s linear 0 s; } .effect.effect -3: before { content : "\f019" ; font-family : FontAwesome; display : flex; align-items: center ; justify- content : center ; position : absolute ; top : 0 ; left : 0px ; width : 100% ; height : 100% ; text-align : center ; font-size : 30px ; transform: scale( 0 , 1 ); transition: all 0.2 s linear 0 s; } .effect.effect -3: hover { text-indent : -9999px ; } .effect.effect -3: hover:before { transform: scale( 1 , 1 ); text-indent : 0 ; } .effect.effect -2 { transition: all 0.2 s linear 0 s; } .effect.effect -2: before { content : "\f093" ; font-family : FontAwesome; display : flex; align-items: center ; justify- content : center ; position : absolute ; top : 0 ; left : 0px ; width : 100% ; height : 100% ; text-align : center ; font-size : 30px ; transform: scale( 0 , 1 ); transition: all 0.2 s linear 0 s; } .effect.effect -2: hover { text-indent : -9999px ; } .effect.effect -2: hover:before { transform: scale( 1 , 1 ); text-indent : 0 ; } .effect.effect -1 { transition: all 0.2 s linear 0 s; } .effect.effect -1: before { content : "\f2ed" ; font-family : FontAwesome; display : flex; align-items: center ; justify- content : center ; position : absolute ; top : 0 ; left : 0px ; width : 100% ; height : 100% ; text-align : center ; font-size : 30px ; transform: scale( 0 , 1 ); transition: all 0.2 s linear 0 s; } .effect.effect -1: hover { text-indent : -9999px ; } .effect.effect -1: hover:before { transform: scale( 1 , 1 ); text-indent : 0 ; } .effect.effect -5 { transition: all 0.2 s linear 0 s; } .effect.effect -5: before { content : "\f1d8" ; font-family : FontAwesome; display : flex; align-items: center ; justify- content : center ; position : absolute ; top : 0 ; left : 0px ; width : 100% ; height : 100% ; text-align : center ; font-size : 30px ; transform: scale( 0 , 1 ); transition: all 0.2 s linear 0 s; } .effect.effect -5: hover { text-indent : -9999px ; } .effect.effect -5: hover:before { transform: scale( 1 , 1 ); text-indent : 0 ; } |
Complete Solution: In this section, we will put the above sections together and create attractive Hover animated buttons.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < style > body { background-color: black; } body .container { width: 850px; margin: 70px auto 0px auto; text-align: center; } body .container .button-effect { padding: 30px 0px; } body .container .button-effect h2 { font-family: "Droid Serif", serif; font-size: 20px; color: #fff; margin-bottom: 40px; } body .container .button-effect a { margin-right: 17px; } body .container .button-effect a:nth-child(2) { background-color: #520a8d; } body .container .button-effect a:nth-child(3) { background-color: #4d0325; } body .container .button-effect a:nth-child(4) { background-color: #09858a; } body .container .button-effect a:nth-child(5) { background-color: #e60d2a; } body .container .button-effect a:nth-child(6) { background-color: #c45f0d; } body .container .button-effect a:last-child { margin-right: 0px; } .effect { text-align: center; display: inline-block; position: relative; text-decoration: none; color: #fff; text-transform: capitalize; /* background-color: - add your own background-color */ font-family: "Roboto", sans-serif; /* put your font-family */ font-size: 18px; padding: 20px 0px; width: 150px; border-radius: 6px; overflow: hidden; } /* effect-4 styles */ .effect.effect-4 { transition: all 0.2s linear 0s; } .effect.effect-4:before { content: "\f0d1"; font-family: FontAwesome; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; font-size: 30px; transform: scale(0, 1); transition: all 0.2s linear 0s; } .effect.effect-4:hover { text-indent: -9999px; } .effect.effect-4:hover:before { transform: scale(1, 1); text-indent: 0; } .effect.effect-3 { transition: all 0.2s linear 0s; } .effect.effect-3:before { content: "\f019"; font-family: FontAwesome; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; font-size: 30px; transform: scale(0, 1); transition: all 0.2s linear 0s; } .effect.effect-3:hover { text-indent: -9999px; } .effect.effect-3:hover:before { transform: scale(1, 1); text-indent: 0; } .effect.effect-2 { transition: all 0.2s linear 0s; } .effect.effect-2:before { content: "\f093"; font-family: FontAwesome; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; font-size: 30px; transform: scale(0, 1); transition: all 0.2s linear 0s; } .effect.effect-2:hover { text-indent: -9999px; } .effect.effect-2:hover:before { transform: scale(1, 1); text-indent: 0; } .effect.effect-1 { transition: all 0.2s linear 0s; } .effect.effect-1:before { content: "\f2ed"; font-family: FontAwesome; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; font-size: 30px; transform: scale(0, 1); transition: all 0.2s linear 0s; } .effect.effect-1:hover { text-indent: -9999px; } .effect.effect-1:hover:before { transform: scale(1, 1); text-indent: 0; } .effect.effect-5 { transition: all 0.2s linear 0s; } .effect.effect-5:before { content: "\f1d8"; font-family: FontAwesome; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; font-size: 30px; transform: scale(0, 1); transition: all 0.2s linear 0s; } .effect.effect-5:hover { text-indent: -9999px; } .effect.effect-5:hover:before { transform: scale(1, 1); text-indent: 0; } </ style > </ head > < body > < div class = "container" > < div class = "button-effect" > < h2 >Animated Buttons on Hover</ h2 > < a class = "effect effect-4" href = "#" title = "Confirm Delivery" > Confirm Delivery </ a > < a class = "effect effect-3" href = "#" title = "Download" >Download</ a > < a class = "effect effect-2" href = "#" title = "Upload" >Upload</ a > < a class = "effect effect-1" href = "#" title = "Delete" >Delete</ a > < a class = "effect effect-5" href = "#" title = "Click Here to Message" > Message </ a > </ div > </ div > < script src = "https://kit.fontawesome.com/704ff50790.js" crossorigin = "anonymous" > </ script > </ body > </ html > |
Output: