Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Hover

Hover

kodzik

na podstawie webdesignerdepot.com

wspólne własności
a {
    display: block;
    transition: all 0.3s ease;
}Code language: CSS (css)

KLIKNIJ na poszczególne buttony, aby zobaczyć pozostałe zapisy html i css

border bg color fade grow rotate shadow shrink swing to circle

Na podstawie html5canvastutorials.com

wspólne własności css
a.ex {
    width: 120px;
    height: 52px;
    margin-bottom: 80px;
    color: black;
    display: block;
    position: relative;
    box-sizing: border-box;
}

a.ex span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    display: grid;
    place-content: center;
}Code language: CSS (css)
Flip Flip 
<a href="#" class="ex ex-1">
    <span>Flip</span>
    <span>Flip</span>
</a>
css
.ex-1 {
background: #289DCC;
}

.ex-1 span {
background: #289DCC;
transition: all 0.3s linear;
}

.ex-1 span:last-of-type {
background: #aaa;
transform: rotateX(90deg);
transform-origin: 0 0;
}

.ex-1:hover span:last-of-type {
background: #fff;
transform: rotateX(0deg);
}

.ex-1:hover span:first-of-type {
background: #289DCC;
}
Top Top 
<a href="#" class="ex ex-4">
     <span><span>
          <span>Top</span>
          <span>Top</span>
     </span></span>
</a>
css
.ex-4 > span > span {
transform-style: preserve-3d;
transition: all 0.2s linear;
transform-origin: 0 0;
}

.ex-4 > span > span span {
background: #289DCC;
transform-style: preserve-3d;
transition: transform 0.3s linear, background 0.3s linear;
transform-origin: 0 0;
}

.ex-4:hover > span > span span:first-of-type {
background: #289DCC;
}

.ex-4 > span > span span:nth-of-type(2) {
background: #fff;
transform: rotateX(-90deg) translateZ(52px);
}

.ex-4:hover > span > span span:nth-of-type(2) {
background: #fff;
}

.ex-4:hover > span > span {
transform: rotateX(90deg);
}
Doors Doors Doors Doors 
<a href="#" class="ex ex-2">
    <span>Doors</span>
    <span>Doors</span>
    <span>Doors</span>
    <span>Doors</span>
</a>
css
.ex-2 {
background: #289DCC;
}

.ex-2 span {
opacity: 1;
transition: all 0.3s linear;
}

.ex-2 span:nth-of-type(2),
.ex-2 span:nth-of-type(3) {
background: #fff;
transform: rotateY(-90deg);
transform-origin: 0 0;
clip: rect(0, 60px, 9999px, 0);
}

.ex-2 span:nth-of-type(3) {
transform-origin: 100% 100%;
transform: rotateY(90deg);
clip: rect(0, 9999px, 9999px, 60px);
}

.ex-2:hover span:nth-of-type(2),
.ex-2:hover span:nth-of-type(3) {
background: #fff;
transform: rotateY(0);
}

.ex-2:hover span:nth-of-type(2),
.ex-2:hover span:nth-of-type(3) {
background: #fff;
transform: rotateY(0);
}

.ex-2:hover span:first-of-type {
background: #289DCC;
}

.ex-2 span:last-of-type {
background: #fff;
opacity: 0;
transition: none;
}

.ex-2:hover span:last-of-type {
transition: all 0.05s linear 0.3s;
}
Arrow 
<a href="#" class="ex ex-5">
    <span>Arrow</span>
    <span> </span>
    <span> </span>
    <span> </span>
    <span> </span>
</a>
css
.ex-5 span {
background: #289DCC;
transform-style: preserve-3d;
transform-origin: 0 0;
transition: all 0.1s linear;
}

.ex-5 span:nth-of-type(1) {
z-index: 99999;
}

.ex-5:hover span:nth-of-type(5) {
left: 40px;
}

.ex-5 span:nth-of-type(2),
.ex-5 span:nth-of-type(3),
.ex-5 span:nth-of-type(4) {
background: none;
}

.ex-5 span:nth-of-type(2):after {
content: '';
position: absolute;
right: 0;
top: 0;
border-style: solid;
border-width: 28px 0 0 28px;
border-color: transparent transparent transparent #289DCC;
}

.ex-5 span:nth-of-type(3):after {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-style: solid;
border-width: 28px 28px 0 0;
border-color: #289DCC transparent transparent #289DCC;
}

.ex-5 span:nth-of-type(4):after {
content: '';
position: absolute;
top: 0;
right: 0;
border-style: solid;
border-width: 26px 0 26px 23px;
border-color: transparent transparent transparent #289DCC;
}

.ex-5:hover span:nth-of-type(2) {
top: -28px;
left: 40px;
}

.ex-5:hover span:nth-of-type(3) {
top: 28px;
left: 40px;
}

.ex-5:hover span:nth-of-type(4) {
right: -23px;
left: 63px;
}
Open Open Open 
<a href="#" class="ex ex-3">
    <span>Open</span>
    <span>Open</span>
    <span>Open</span>
</a>
css
.ex-3 {
background: #fff;
transition: transform 0.3s linear, background 0.3s linear 0.3s;
}

.ex-3 span {
transition: all 0.3s linear 0.3s;
}

.ex-3:hover {
background: #fff;
transform: scale(1.3);
}

.ex-3 span:nth-of-type(2),
.ex-3 span:nth-of-type(3) {
background: #289DCC;
clip: rect(0px, 9999px, 26px, 0px);
transform-origin: 0 0;
}

.ex-3 span:nth-of-type(3) {
clip: rect(26px, 9999px, 52px, 0px);
transform-origin: 100% 100%;
}

.ex-3:hover span:nth-of-type(2),
.ex-3:hover span:nth-of-type(3) {
background: #289DCC;
transform: rotateX(-90deg);
}
Fill 
<a href="#" class="ex ex-6">
    <span>Fill</span>
    <span> </span>
</a>
css
.ex-6 {
background: #289DCC;
overflow: hidden;
}

.ex-6 span {
transform-style: preserve-3d;
transform-origin: 0 0;
transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
}

.ex span:first-of-type {
z-index: 99999;
}

.ex-6 span:last-of-type {
background: #fff;
left: -100%;
}

.ex-6:hover span {
left: 0;
}

Na podstawie ianlunn.co.uk

wspólne własności css
a {
color: black;
font-size: 14px;
width: 180px;
margin: 7px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
display: block;
text-align: center;
text-decoration: none;
}
	
a:focus,
a:hover,
a:active {
color: white;
}

KLIKNIJ na poszczególne buttony, aby zobaczyć pozostałe zapisy html i css

2D Transitions
Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce in Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward
Background Transitions
Fade Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

Na podstawie tympanus.net

wspólne własności
HTML
<div class="holdButtons">
    <button class="btn btn-1 btn-1a">Button btn-1a</button>
    <button class="btn btn-1 btn-1b">Button btn-1b</button>
    <button class="btn btn-1 btn-1c">Button btn-1c</button>
    <button class="btn btn-1 btn-1d">Button btn-1d</button>
    <button class="btn btn-1 btn-1e">Button btn-1e</button>
    <button class="btn btn-1 btn-1f">Button btn-1f</button>
</div>
CSS
.holdButtons {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto auto auto;
grid-row: auto auto;
grid-gap: 40px;
}

.btn {
background: none;
border: none;
outline: none;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
transition: all 0.3s;
}

.btn:after {
content: '';
position: absolute;
z-index: -1;
transition: all 0.3s;
}

/* Button 1 */
.btn-1 {
border: 3px solid #289DCC;
color: #fff;
}

KLIKNIJ na poszczególne buttony, aby zobaczyć pozostałe zapisy css.

Button btn-1a Button btn-1b Button btn-1c Button btn-1d Button btn-1e Button btn-1f

Na podstawie codepen.io

HOVER ME, THEN CLICK ME!

na podstawie ddle.net

CLICK ME!

na podstawie learn.shayhowe.com

CLICK ME!

linki