This is not about design. Here is a ready-made code of various effects with detailed comments.
In the future, these effects can be applied to any design idea and create an original button that no one else has on the Internet.
All buttons shown below are valid. Choose the option that you like.
Button variations will be added as you create them.
To quickly see the code, like the button, click on the link «Code», next to the example button.
When hovering:
Gradient Code
Flooding Code
Bleaching Code
Pop up Code
Distortion Code
Multicolor frame Code
3D button Code
The appearance of the text rotation Code
The appearance of text from the depths Code
The appearance of pictures Code
When you press:
Red button Code
Button with indicator Code
Key Code
[rec-blok]
Gradient
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
.one { /* Button appearance */
color: #524E49; /* Text color */
background: #fdeaa8 ;
padding: 10px; /* Minimal text indent from button borders. Defines button size */
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
}
.one:hover { /* Hover transform */
background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777);
}
</style>
</head>
<body>
<button class="one" onclick="location.href='#';">Button</button>
</body>
</html>
Flooding
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
.two { /* Button appearance */
color: #524E49; /* Text color */
background: #fdeaa8 ;
padding: 10px; /* Internal indent. Affects button size */
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
position: relative; /* Relative positioning, to set the absolute positioning of the child elements */
}
.two:before { /* Pseudo element to create a floating */
content:''; /* Required pseudo-element property: before */
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 0px; /* Height 0, therefore not visible */
background: rgba(148,144,143,0.4); /* Fade background color */
border-radius: 5px;
transition: all 0.5s ease-out;
}
.two:hover:before {
height: 42px;
}
</style>
</head>
<body>
<button class="two" onclick="location.href='#';">Button</button>
</body>
</html>
Bleaching
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
.three { /* Button appearance */
color: #524E49; /* Text color */
background: #fdeaa8;
padding: 10px; /* Text indent from borders - determines the size of the button */
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
}
/* Change the appearance when you hover */
.three:hover {
background: rgba(0,0,0,0);/*Change the background color */
color: #3a7999; /* Change text color */
box-shadow: inset 0 0 0 3px #3a7999; /* Change the shadow */
}
</style>
</head>
<body>
<button class="three" onclick="location.href='#';">Button</button>
</body>
</html>
Pop up
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
/* Button appearance */
.elementy {
color: #524E49; /* Text color */
background: #fdeaa8;
padding: 10px; /* Internal indent. Affects button size */
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); /* Set the animation (move). For all actions (all) Movement time (0.8 sec.) Movement direction (cubic-bezier (0.165, 0.84, 0.44, 1)) */
}
/* Hover effect */
.elementy:hover { /* Add a pseudo-class: hover */
-webkit-transform: translate(10px);
transform: translate(10px); /* The distance that the button is shifted */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) /* Change the shadow */
}
</style>
</head>
<body>
<button class="elementy" onclick="location.href='#';">Button</button>
</body>
</html>
Distortion
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
/* Button appearance */
.five {
color: #524E49; /* Text color */
background: #fdeaa8;
padding: 10px; /* Internal indent. Affects button size */
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
transition: all 500ms ease-out;
}
/* Hover effect */
.five:hover { /* Add a pseudo-class: hover */
transform: skew(10deg);/* Animation action - 10 degree deviation */
}
</style>
</head>
<body>
<button class="five" onclick="location.href='#';">Button</button>
</body>
</html>
Colorful frame
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
/* Button appearance */
.six {
color: #524E49; /* Text color */
background: #fdeaa8;
padding: 10px; /* Text indent from borders. Defines button size */
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
transition: all 500ms ease-out;
}
/* Hover effect */
.six:hover {
box-shadow: 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
}
</style>
</head>
<body>
<button class="six" onclick="location.href='#';">Button</button>
</body>
</html>
3D button
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
/* Button appearance */
.seven {
color: #524E49; /* Text color */
background: #fdeaa8;
padding: 10px;
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
position: relative; /* Relative positioning, to set the absolute positioning of the child elements */
transition: all 500ms ease-out;
transform-style: preserve-3d;
}
/* Create a pseudo element - the top of the button */
.seven:after {
content: 'Button';
position: absolute;
top: -50%;
left: 0px;
width: 100%;
background: #fdeaa8;
border-radius: 5px;
box-shadow: 0px 1px 3px;
transform-origin: bottom; /* Point about which rotation will be performed */
transform: rotateX(90deg); /* We place it in a horizontal plane, as a result of which the pseudo element is not visible. */
}
/* Hover effect */
.seven:hover {
transform-origin: bottom; /* The point relative to which the rotation occurs */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<button class="seven" onclick="location.href='#';">Button</button>
</body>
</html>
The appearance of rotating text
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
/* Appearance */
.eight {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
width: 90px;
height: 40px;
padding: 10px; /* Internal indent. Affects button size */
border-radius: 5px;
box-shadow: 0px 2px 4px;
display: inline-block;
position: relative; /* Relative positioning, to set the absolute positioning of the child elements */
text-decoration: none;
}
/* Create a pseudo-element - text */
.eight:after {
width: 80%;
color: red; /* Text color */
font-family: 'Lucida Console';
font-size: 18px;
text-align: center;
content: attr(title); /* Tex is taken from the title attribute. */
display: block; /* Block element */
opacity: 0; /* Invisible */
position: absolute;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%; /* The point from which the animation originates - the center */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out;
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%);
z-index: 3; /* On top of all the elements */
}
/* Hover effect */
.eight:hover:after {
opacity: 1; /* Visible */
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%); /* Transformation Point - Center */
}
</style>
</head>
<body>
<button class="eight" title="Button" ></button>
</body>
</html>
The appearance of text from the depths
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
/* Appearance */
.nine {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
width: 90px;
height: 40px;
padding: 10px; /* Internal indent. Affects button size */
border-radius: 5px;
box-shadow: 0px 2px 4px;
display: inline-block; /* Inline element with block properties */
position: relative; /* Relative positioning, to set the absolute positioning of the child elements */
text-decoration: none;
}
/* Create a pseudo-element for the text that appears. */
.nine:after {
width: 80%;
color: red; /* Text color */
font-family: 'Lucida Console';
content: attr(title); /* Text is taken from the title attribute. */
display: block; /* Block element */
font-size: 18px;
text-align: center;
opacity: 0; /* Invisible */
position: absolute; /* Position absolutely in the center. */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%);
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out;
z-index: 3;
}
/* Hover effect */
.nine:hover:after {
opacity: 1; /* Visible */
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}
</style>
</head>
<body>
<button class="nine" title="Button" ></button>
</body>
</html>
The appearance of pictures
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Effects for CSS buttons</title>
<style>
/* Appearance */
.ten {
color: #524E49; /* Text color */
background: #F7E09C;
padding: 10px 35px; /* Internal indent. Affects button size */
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px;
position: relative; /* Relative positioning, to set the absolute positioning of the child elements */
}
/* Picture */
.ten img {
position: absolute;
top: 7px; /* In the middle */
left: -30px; /* We move outside the button */
transition: all 200ms ease; /* Appearance animation. */
}
/* Hover effect */
.ten:hover img {
left: 5px; /* Return the image to the button */
}
</style>
</head>
<body>
<!--The picture is placed inside the button.-->
<button class="ten" onclick="location.href='#';"><img src="images/Animation.gif">Button</button>
</body>
</html>
Red button
CSS
.tower {
position: relative; /* Relative positioning wrapper for absolute positioning of child elements */
}
/* Appearance */
.round {
position: absolute;
width: 70px;
height: 70px;
border: 4px solid hsl(5, 40%, 70%); /* Frame */
border-radius: 50%/50%; /* Making the frame round */
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%);
сursor: pointer;
transform: rotate(30deg);
}
/* Effect when pressed */
.round:active { /* Add a pseudo-class: active */
width: 69px; /* Reduce the width */
height: 69px; /* Reduce the height */
box-shadow: 0 0 hsl(5, 60%, 60%); /* Reduce the shadow */
border: 3px solid hsl(5, 40%, 70%); /* Reduce the thickness of the frame */
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%); /* Change linear gradient values */
}
HTML
<div class="tower">
<span class="round" href="*"></span>
</div>
Button with indicator
CSS
/* Wrapper */
.switch {
width: 70px;
height: 70px;
position: relative; /* Relative positioning, to set the absolute positioning of the child elements */
cursor: pointer;
}
/* Inner circle */
.dot {
position: absolute;
top: 7%;
left: 7%;
width: 70px;
height: 70px;
border-radius: 50%; /* Make a circle */
background: hsl(0, 0%, 90%);
box-shadow: /* Multi-layered shade, outer and inner */
0 3px 5px hsl(0, 0%, 75%),
inset 0 1px 0 hsl(0, 0%, 95%),
inset 0 -5px 5px hsl(0, 0%, 75%),
inset 0 5px 5px hsl(0, 0%, 95%);
}
/* Outer circle */
.circ {
position: absolute; /* We position absolutely relative to the shell in the center of the inner circle */
top: 0;
left: 0;
width: 82px;
height: 82px;
border-radius: 50%; /* Make a circle */
background: linear-gradient(#ccc, #fff);
background: -webkit-linear-gradient(#ccc, #fff);
box-shadow: /* Multilayer inner shadow */
inset 0 2px 1px hsl(0, 0%, 75%),
inset 0 -2px hsl(0, 0%, 75%);
}
/* Indicator - pseudo-element */
.switch .dot:before {
content: "";
position: absolute; /* Position absolutely in the center. */
left: 40%;
top: 40%;
width: 20%;
height: 20%;
border-radius: 50%; /* Make a circle */
background: radial-gradient(#fff, #333);
background: -webkit-radial-gradient(#fff, #333);
}
/* Effect when pressed */
.switch:active .dot:before {
content: "";
background: radial-gradient(#fff, #02A829);
background: -webkit-radial-gradient(#fff, #02A829); /* Change the color of the indicator */
}
.switch:active .dot {
background: radial-gradient(#fff, #ccc);
background: -webkit-radial-gradient(#fff, #ccc); /* Change the background color of the inner circle */
width: 69px; /* Reduce the width of the inner circle */
height: 69px; /* Reduce the height of the inner circle */
}
HTML
<!--Оболочка-->
<div class="switch">
<!--Outer circle-->
<div class="circ">
<!--Inner circle-->
<span class="dot"></span>
<!--Link to referral address-->
<a href=""></a>
</div>
</div>
Key
CSS
.switch1 {
width: 75px;
height: 45px;
position: relative;
cursor: pointer;
}
.dot1 {
position: absolute;
top: 7%;
left: 7%;
display: block;
width: 75px;
height: 45px;
border-radius: 7px;
background: linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 96%));
box-shadow: -3px 5px hsl(0, 0%, 75%),
1px -2px hsl(0, 0%, 75%),
inset 0 0px 5px hsl(0, 0%, 95%),
inset 0 -1px 5px hsl(0, 0%, 95%);
z-index: 1;
}
.circ1 {
display: block;
position: absolute;
width: 87px;
height: 57px;
top: 0;
left: 0;
background: linear-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow:
inset 0 1px 1px hsl(0, 0%, 95%),
inset 0 -1px 1px hsl(0, 0%, 95%);
}
.dot1:before {
content: "Enter";
color: hsl(0, 0%, 60%);
position: absolute;
left: 20%;
top: 15%;
font-size: 20px;
}
.switch1:active .dot1:before {
content: "Enter";
}
.switch1:active .dot1 {
background: radial-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow: -2px 4px hsl(0, 0%, 75%),
0px -1px hsl(0, 0%, 75%),
inset 0 1px 2px hsl(0, 0%, 95%),
inset 0 -1px 2px hsl(0, 0%, 95%);
}
HTML
<div class="switch1">
<div class="circ1">
<a class="dot1"></a>
</div>
</div>
Perhaps the transform and gradient properties will require vendor prefixes
