October 17, 2021

button over effect

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Poppins:500&display=swap');
        body { font-family: 'Poppins', sans-serif; }
        .button-1 { position: relative; display: inline-block; }
    .btn {  border: solid 2px #000; transition: color 0.4s linear; background: #fff; padding: 40px 60px; font-size: 30px;}
    .btn:hover { color: #fff; position: relative; z-index: 99; border: solid 2px #3F51B5;}
    .btn:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image:linear-gradient(120deg,#2196F3,#3F51B5); z-index: -1;  transition: transform 0.5s; transform-origin: 0 0; transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7); overflow: hidden;}
    .btn1:before { transform: scaleX(0); }
    .btn1:hover:before { transform: scaleX(1); }
        
        .btn2:before { transform: scaleY(0); }
        .btn2:hover:before { transform: scaleY(1); }
    </style>
</head>
<body>
    <div class="button-1">
        <button class="btn btn1">Hover me</button> 
        <button class="btn btn2">Hover me</button>  
    </div>
</body>
</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *