CREATE CSS BOX SHADOW AND BEAUTIFUL BUTTONS @Dr Tech USING CSS |HTML| |C...

0 HTML And CSS Cooding July 21, 2022

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title></title>

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

</head>

<body>

<div class="buttons">

<h1>Simple hover effects with <code>box-shadow</code>code></h1>

<button class="fill">Fill In</button>

<button class="pulse">Pulse</button>

<button class="close">Close</button>

<button class="raise">Raise</button>

<button class="up">Fill Up</button>

<button class="slide">Slide</button>

<button class="offset">Offset</button>

</div>

</body>

</html>

CSS SOURCE CODE

.fill:hover,

.fill:focus {

box-shadow: inset 0 0 0 2em var(--hover);}

.pulse:hover,

.pulse:focus {

-webkit-animation: pulse 1s;

animation: pulse 1s;

box-shadow: 0 0 0 2em transparent;}

@-webkit-keyframes pulse {

0% {

box-shadow: 0 0 0 0 var(--hover);}}

@keyframes pulse {

0% {

box-shadow: 0 0 0 0 var(--hover);}}

.close:hover,

.close:focus {

box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);}

.raise:hover,

.raise:focus {

box-shadow: 0 0.5em 0.5em -0.4em var(--hover);

transform: translateY(-0.25em);}

.up:hover,

.up:focus {

box-shadow: inset 0 -3.25em 0 0 var(--hover);}

.slide:hover,

.slide:focus {

box-shadow: inset 6.5em 0 0 0 var(--hover);}

.offset {

box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);}

.offset:hover, .offset:focus {

box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);}

.fill {

--color: #a972cb;

--hover: #cb72aa;}

.pulse {

--color: #ef6eae;

--hover: #ef8f6e;}

.close {

--color: #ff7f82;

--hover: #ffdc7f;}

.raise {

--color: #ffa260;

--hover: #e5ff60;

}

.up {

--color: #e4cb58;

--hover: #94e458;

}

.slide {

--color: #8fc866;

--hover: #66c887;

}

.offset {

--color: #19bc8b;

--hover: #1973bc;

}

button {

color: var(--color);

transition: 0.25s;

}

button:hover, button:focus {

border-color: var(--hover);

color: #fff;

}

body {

color: #fff;

background: #17181c;

font: 300 1em "Fira Sans", sans-serif;

justify-content: center;

align-content: center;

align-items: center;

text-align: center;

min-height: 100vh;

display: flex;

}

button {

background: none;

border: 2px solid;

font: inherit;

line-height: 1;

margin: 0.5em;

padding: 1em 2em;

}

h1 {

font-weight: 400;}

code {

color: #e4cb58;

font: inherit;

}