Awesome Button hover (Multiple Color) effect Using Only HTML & CSS @informativeworld713

Learn Awesome Button hover Multiple Color effect Using Only HTML & CSS @informativeworld713. Animation Tutorial For Beginners to Advance in Hindi/Urdu: In this CSS3 tutorial in Hindi/Urdu we will learn everything you need to learn about CSS from scratch. #css #css3 #css3html5 #css3tutorial #csshovereffect #css3animation #html #html5 #htmltutorial #htmlcss2021

Buttons are a key element in web design, and adding hover effects can make them even more eye-catching and engaging. In this tutorial, we will explore how to create an awesome button hover effect using only HTML.

To create the hover effect, we will use the :hover pseudo-class in CSS. This allows us to apply different styles to an element when the user hovers over it with their mouse. By combining different CSS properties and values, we can achieve a range of visually appealing effects.

Step 1: HTML Markup

Let’s start by creating the HTML markup for our button. In this example, we will use a simple <button> element, but you can use any HTML element that suits your design needs.

<button class="hover-button">Click Me</button>

We have added a class name hover-button to the button element. This will allow us to target it in our CSS later on.

Step 2: CSS Styling

Next, let’s add some CSS to style our button and create the hover effect. Here’s the CSS code:

.hover-button { background-color: #3498db; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #2980b9; }

In this CSS code, we have defined the initial styles for our button using the .hover-button class. We have set the background color to #3498db, text color to white, padding to 10px 20px, removed the border, and added a border-radius of 4px for rounded corners.

The transition property is used to specify the transition effect when the background color changes. We have set it to 0.3s ease, which means the transition will take 0.3 seconds and have a smooth effect.

The .hover-button:hover selector is used to apply the styles when the button is hovered over by the user. In this case, we have changed the background color to #2980b9, creating a visually appealing hover effect.

Step 3: Test and Customize

Save the HTML and CSS files, and open the HTML file in your web browser. You should see the button with the hover effect. Try hovering over it to see the effect in action.

You can customize the button’s styles to match your project’s design. Experiment with different colors, fonts, padding, and other CSS properties to create your own unique hover effect.

Conclusion

Adding hover effects to buttons can enhance the user experience and make your website more visually appealing. By using only HTML and CSS, you can create awesome button hover effects easily. Remember to test your buttons on different devices and browsers to ensure a consistent experience for your users.

Related:https://cssanimation.shop/rounded-pulse-button-hover-shadow-effect-informativeworld713/

Watch Our More Videos On YouTube

<div class="container">
  <a href="#" class="button">
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="button__wrapper">
      <span class="button__text">ENTRY</span>
    </div>
    <div class="button__box">
      <div class="inner inner__top"></div>
      <div class="inner inner__front"></div>
      <div class="inner inner__bottom"></div>
      <div class="inner inner__back"></div>
      <div class="inner inner__left"></div>
      <div class="inner inner__right"></div>
    </div>
  </a>
</div>
.button{
    --top : rgba(100,100,100,.8) ;
    --bottom : rgba(100,100,100,.2) ;
    --side : rgba(100,100,100,.5) ;

    --1_top : rgba(216,0,60,.8) ;
    --1_bottom : rgba(216,0,60,.2) ;
    --1_side : rgba(216,0,60,.5) ;

    --2_top : rgba(0,100,190,.8) ;
    --2_bottom : rgba(0,100,190,.2) ;
    --2_side : rgba(0,100,190,.5) ;

    --3_top : rgba(0,170,100,.8) ;
    --3_bottom : rgba(0,170,100,.2) ;
    --3_side : rgba(0,170,100,.5) ;

    --4_top : rgba(255,230,20,.8) ;
    --4_bottom : rgba(255,230,20,.2) ;
    --4_side : rgba(255,230,20,.5) ;

    --5_top : rgba(155,50,255,.8) ;
    --5_bottom : rgba(155,50,255,.2) ;
    --5_side : rgba(155,50,255,.5) ;
}

.button{
    display : flex ;
    position : relative ;
    width : 280px ;
    height : 80px ;
    text-decoration : none ;
    perspective : 600px ;
    background : linear-gradient( rgba(255,255,255,.1) 0% , rgba(255,255,255,0) 30%  ,rgba(255,255,255,0) 70% , rgba(255,255,255,.1)) ;
    box-shadow : 0 0 32px rgba(0,0,0,1) ;
}
.button::before,
.button::after{
    content : '' ;
    position : absolute ;
    top : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 100% ;
    height : 100% ;    
}
.button::before{
    top : 0 ;
    transform-origin : top center ;
    transform : rotateX(70deg) ;
    background : linear-gradient(135deg , rgba(255,255,255,.3) 10%, rgba(255,255,255,0) 60%);
}
.button::after{
    bottom : 0 ;
    transform-origin : bottom center ;
    transform : rotateX(-110deg) ;
    background : radial-gradient( rgba(255,255,255,0) 40%, rgba(255,255,255,.1) ) ;
}
.button__wrapper{
    position : relative ;
    z-index : 2 ;
    width : 100% ;
    height : 100% ;
    background : linear-gradient( rgba(255,255,255,.4) 0% , rgba(255,255,255,0) 30%  ,rgba(255,255,255,0) 70% , rgba(255,255,255,.2)) ;
    transform : translate3d( 0 , 27px , 74px) ;
    perspective : 600px ;
}
.button__text{
    position : relative ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 100% ;
    height : 100% ;
    font-family: 'Alfa Slab One', cursive;
    font-size : 32px ;
    letter-spacing : 4px ;
    color : rgba(255,255,255,.2) ;
    transition : all ease-in-out 1s ;
}
.button__text::before{
    content : '' ;
    position : absolute ;
    z-index : 1 ;
    top : 0 ;
    left : 0 ;
    width : 230px ;
    height : 80px ;
    background : linear-gradient(25deg , rgba(255,255,255,.1) , rgba(255,255,255,0)) ;
    clip-path : path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z') ;
}
.button__text::after{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    top : 4px ;
    left : 4px ;
    width : 272px ;
    height : 40px ;
    background : linear-gradient(25deg , rgba(255,255,255,.3) , rgba(255,255,255,0)) ;
    clip-path : path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z') ;
}
.button__wrapper::before,
.button__wrapper::after{
    content : '' ;
    position : absolute ;
    top : 0 ;
    width : 84px ;
    height : 100% ;
    background : linear-gradient(90deg , rgba(255,255,255,.2) 0% , rgba(255,255,255,0) 30%  ,rgba(255,255,255,0) 70% , rgba(255,255,255,.2)) ;
    background : radial-gradient( rgba(255,255,255,0) 40%, rgba(255,255,255,.1) ) ;
}
.button__wrapper::before{
    left : 0 ;
    transform-origin : left center ;
    transform : rotateY(90deg) skewY(-20deg);
}
.button__wrapper::after{
    right : 0 ;
    transform-origin : right center ;
    transform : rotateY(-90deg) skewY(20deg);
}

.button__box{
    position : absolute ;
    top : 0 ;
    left : 8px ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 264px ;
    height : 70px ;
    transform : translate3d(0, 4px, 10px) ;
    perspective : 600px ;
}
.inner{
    transition : all ease-in-out 1s ;
}
.inner__back{
    position : absolute ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    background : var(--bottom);
    perspective : 600px ;
}
.inner__top{
    position : absolute ;
    z-index : 3 ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    transform-origin : top left ; 
    transform : rotateX(70deg) ;
    background : var(--top);
}
.inner__front{
    position : absolute ;
    z-index : 3 ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    transform-origin : top left ; 
    transform : translate3d(0, 24px, 68px ) ;
    background : var(--top);
}
.inner__bottom{
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    width : 0 ;
    height : 100% ;
    transform-origin : bottom left ; 
    transform : rotateX(-110deg) ;
    background : var(--bottom);
}
.inner__left{
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    width : 68px ;
    height : 100% ;
    transform-origin : center left ; 
    transform : rotateY(-90deg) skewY(20deg) ;
    background : rgba(255,0,0,0) ;
    transition : all linear .01s ;
}
.inner__right{
    position : absolute ;
    z-index : 2 ;
    top : 0 ;
    left : 0 ;
    width : 68px ;
    height : 100% ;
    transform-origin : center left ; 
    transform : rotateY(-90deg) skewY(20deg) ;
    background : rgba(255,0,0,0) ;
}
.button:hover .inner__top,
.button:hover .inner__front,
.button:hover .inner__bottom,
.button:hover .inner__back{
    width : 100% ;
}
.button:hover .inner__left{
    background :  var(--side) ;
}
.button:hover .inner__right{
    left : 100% ;
    background :  var(--side) ;
}
.button:hover .button__text{
    color : rgba(255,255,255,1) ;
}
.plate{
    position : absolute ;
    z-index : 10 ;
    top : 0 ;
    left : -20px ;
    width : 320px ;
    height : 120px ;
    animation-duration : 3s ;
    animation-iteration-count : infinite ;
}
.plate:nth-child(1){
    animation-name : plate_1 ;
}
.plate:nth-child(2){
    animation-name : plate_2 ;
}
.plate:nth-child(3){
    animation-name : plate_3 ;
}
.plate:nth-child(4){
    animation-name : plate_4 ;
}
.plate:nth-child(5){
    animation-name : plate_5 ;
}
.button:hover .plate{
    animation-play-state : paused ;
}
.plate:nth-child(1):hover ~ .button__box .inner__top,
.plate:nth-child(1):hover ~ .button__box .inner__front{
    background : var(--1_top);
} 
.plate:nth-child(1):hover ~ .button__box .inner__left,
.plate:nth-child(1):hover ~ .button__box .inner__right{
    background : var(--1_side);
} 
.plate:nth-child(1):hover ~ .button__box .inner__back,
.plate:nth-child(1):hover ~ .button__box .inner__bottom{
    background : var(--1_bottom);
} 
.plate:nth-child(2):hover ~ .button__box .inner__top,
.plate:nth-child(2):hover ~ .button__box .inner__front{
    background : var(--2_top);
} 
.plate:nth-child(2):hover ~ .button__box .inner__left,
.plate:nth-child(2):hover ~ .button__box .inner__right{
    background : var(--2_side);
} 
.plate:nth-child(2):hover ~ .button__box .inner__back,
.plate:nth-child(2):hover ~ .button__box .inner__bottom{
    background : var(--2_bottom);
} 
.plate:nth-child(3):hover ~ .button__box .inner__top,
.plate:nth-child(3):hover ~ .button__box .inner__front{
    background : var(--3_top);
} 
.plate:nth-child(3):hover ~ .button__box .inner__left,
.plate:nth-child(3):hover ~ .button__box .inner__right{
    background : var(--3_side);
} 
.plate:nth-child(3):hover ~ .button__box .inner__back,
.plate:nth-child(3):hover ~ .button__box .inner__bottom{
    background : var(--3_bottom);
} 
.plate:nth-child(4):hover ~ .button__box .inner__top,
.plate:nth-child(4):hover ~ .button__box .inner__front{
    background : var(--4_top);
} 
.plate:nth-child(4):hover ~ .button__box .inner__left,
.plate:nth-child(4):hover ~ .button__box .inner__right{
    background : var(--4_side);
} 
.plate:nth-child(4):hover ~ .button__box .inner__back,
.plate:nth-child(4):hover ~ .button__box .inner__bottom{
    background : var(--4_bottom);
} 
.plate:nth-child(5):hover ~ .button__box .inner__top,
.plate:nth-child(5):hover ~ .button__box .inner__front{
    background : var(--5_top);
} 
.plate:nth-child(5):hover ~ .button__box .inner__left,
.plate:nth-child(5):hover ~ .button__box .inner__right{
    background : var(--5_side);
} 
.plate:nth-child(5):hover ~ .button__box .inner__back,
.plate:nth-child(5):hover ~ .button__box .inner__bottom{
    background : var(--5_bottom);
} 
@keyframes plate_1{
    0%   { transform : scale(1) ; }
    19.9%{ transform : scale(1) ; }
    20%  { transform : scale(0) ; }
    100% { transform : scale(0) ; }
}
@keyframes plate_2{
    0%   { transform : scale(0) ; }
    19.9%{ transform : scale(0) ; }
    20%  { transform : scale(1) ; }
    39.9%{ transform : scale(1) ; }
    40%  { transform : scale(0) ; }
    100% { transform : scale(0) ; }
}
@keyframes plate_3{
    0%   { transform : scale(0) ; }
    39.9%{ transform : scale(0) ; }
    40%  { transform : scale(1) ; }
    59.9%{ transform : scale(1) ; }
    60%  { transform : scale(0) ; }
    100% { transform : scale(0) ; }
}
@keyframes plate_4{
    0%   { transform : scale(0) ; }
    59.9%{ transform : scale(0) ; }
    60%  { transform : scale(1) ; }
    79.9%{ transform : scale(1) ; }
    80%  { transform : scale(0) ; }
    100% { transform : scale(0) ; }
}
@keyframes plate_5{
    0%   { transform : scale(0) ; }
    79.9%{ transform : scale(0) ; }
    80%  { transform : scale(1) ; }
    100% { transform : scale(1) ; }
}


.container{
    display : flex ;
    flex-direction : column ;
    justify-content : center ;
    align-items : center ;
  min-height:100vh;
  background:#222;
}