CSS BUTTON HOVERED ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL| ...

0 HTML And CSS Cooding August 15, 2022

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="b.css">

</head>

<body>

<div class="container">

<a class="btn btn-0">To Right</a>

<a class="btn btn-1">The Blue</a>

<a class="btn btn-2">The Gold</a>

<a class="btn btn-3">The Green</a>

<a class="btn btn-4">The Red</a>

<a class="btn btn-5">The Grey</a>

</div>

</body>

</html>

CSS SOURCE CODE

body{

background: linear-gradient(170deg , seagreen,green,yellow);

font-family: 'Varela Round', sans-serif;

margin: 0;}

.container {

display: flex;

justify-content: center;

align-items: center;

align-content: center;

flex-wrap: wrap;

width: 80vw;

margin: 0 auto;

min-height: 100vh;}

.btn {

flex: 1 1 auto;

margin: 10px;

padding: 20px;

text-align: center;

transition: 0.5s;

background-size: 200% auto;

font-size: 14px;

color: white;

box-shadow: 0 7px 20px 0 rgba(0,0,0,0.26);

cursor: pointer;

text-transform: uppercase;

border-radius : 15px;}

.btn:hover {

background-position: right center;

box-shadow: 0 17px 20px 0 rgba(0,0,0,0.36);

text-shadow: 0 0 14px rgba(0,0,0,0.5);}

.btn-0 {

background-image: linear-gradient(to right, #1D1F20 10%, #666666 61%, #1D1F20 100%);}

.btn-1 {

background-image: linear-gradient(135deg, #6B87D7 10%, #75BDCA 61%, #6B87D7 100%);}

.btn-2 {

background-image: linear-gradient(135deg, #D29459 20%, #DDC789 61%, #D29459 100%);}

.btn-3 {

background-image: linear-gradient(135deg, #67C0BE 0%, #97DD89 61%, #67C0BE 100%);}

.btn-4 {

background-image: linear-gradient(135deg, #C34357 0%, #F19289 61%, #C34357 100%);}

.btn-5 {

background-image: linear-gradient(135deg, #646464 0%, #AAAAAA 61%, #646464 100%);}

.btn-6 {

background-image: linear-gradient(135deg, #8B572A 0%, #A57E5B 61%, #8B572A 100%);

text-transform: uppercase;}

Tags

HTML CSS CSS_ANIMATION

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.