How to Customize Button Styles With CSS Examples

Hover the cursor:

GradientCode

Float Code

Bleaching Code

Floating Code

Distortion Code

Multicolor frame Code

3D button Code

The appearance of the text by rotation Code

Appearance of text Code

The appearance of the picture Code

When you click:

 

Red button Code

 

 

Button with indicator Code

 

 

Key Code

Gradient

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Gradient</title>
<style>
.one {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
}
.one:hover {
	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>

Float

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Float</title>
<style>
.two {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.two:before {
	content:'';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	background: rgba(148,144,143,0.4);
	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>Bleaching</title>
<style>
.three {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.three:hover {
	background: rgba(0,0,0,0);
	color: #3a7999;
	box-shadow: inset 0 0 0 3px #3a7999;
}
</style>
</head>
<body>
<button class="three" onclick="location.href='#';">Button</button>
</body>
</html>

Floating

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Floating</title>
<style>
.elementy {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	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);
}

.elementy:after {
  content: "";
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  opacity: 0;
  -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);
}

.elementy:hover {
  -webkit-transform: translate(10px);
  transform: translate(10px);
}

.elementy:hover:after {
    opacity: 1;
}
</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>Distortion</title>
<style>
.five {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.five:hover {
	transform: skew(10deg);
}
</style>
</head>
<body>
<button class="five" onclick="location.href='#';">Button</button>
</body>
</html>

Multicolored frame

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Multicolored frame</title>
<style>
.six {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.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>3D button</title>
<style>
.seven {
	color: #524E49;
	background: #fdeaa8;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.seven {
	transform-style: preserve-3d;
}
.seven:after {
	top: -50%;
	left: 0px;
	width: 100%;
	position: absolute;
	background: #fdeaa8;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	content: 'Кнопка';
	transform-origin: left bottom;
	transform: rotateX(90deg);
}
.seven:hover {
	transform-origin: center bottom;
	transform: rotateX(-90deg) translateY(100%);
}
</style>
</head>
<body>
<button class="seven" onclick="location.href='#';">Button</button>
</body>
</html>

The appearance of a rotating text

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>The appearance of a rotating text</title>
<style>
.eight {
	color: #000;
	background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
	width: 80px;
	height: 25px;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 2px 4px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.eight:before {
    display: block;
    content: "";
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.eight:after {
   font-family: 'Lucida Console';
   content: attr(title);
   display: block;
   font-size: 18px;
   text-align: center;
   opacity: 0;
   position: absolute;
   text-transform: none;
   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;
   width: 80%;
   z-index: 3;
}
.eight:hover:before {
   opacity: 0.6;
}
.eight:hover:after {
   opacity: 1;
   -webkit-transform: scale(1) translateY(-50%);
	transform: scale(1) translateY(-50%);
}
.eight:after {
   -webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
	transform: scale(0) rotate(-360deg) translateY(-50%);
}
.eight:hover:after {
   -webkit-transform: scale(1) rotate(0deg) translateY(-50%);
	transform: scale(1) rotate(0deg) translateY(-50%);
}
</style>
</head>
<body>
<a class="eight" title="Button" href="#"></a>
</body>
</html>

Appearance of text

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Appearance of text</title>
<style>
.nine {
	color: #000;
	background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
	width: 80px;
	height: 25px;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 2px 4px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.nine:before {
    display: block;
    content: "";
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.nine:after {
   font-family: 'Lucida Console';
   content: attr(title);
   display: block;
   font-size: 18px;
   text-align: center;
   opacity: 0;
   position: absolute;
   text-transform: none;
   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;
   width: 80%;
   z-index: 3;
}
.nine:hover:before {
   opacity: 0.6;
}
.nine:hover:after {
   opacity: 1;
   -webkit-transform: scale(1) translateY(-50%);
	transform: scale(1) translateY(-50%);
}
</style>
</head>
<body>
<a class="nine" title="Button" href="#"></a>
</body>
</html>

Button with GIF

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Button with GIF</title>
<style>
.ten {
	color: #524E49;
	background: #F7E09C;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	box-shadow: 0px 1px 3px; 
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease-out;
}
.ten {
	padding: 10px 35px; 
	overflow: hidden;
}
.ten img {
	position: absolute;
	top: 7px;
	left: -30px;
	transition: all 200ms ease;
}
.ten:hover img {
	left: 5px;
}
</style>
</head>
<body>
<button class="ten" onclick="location.href='#';"><img src="images/Animation.gif">Button</button>
</body>
</html>

Red button

CSS

.tower {
	position: relative;
}
.round {
	position: absolute;
	width: 70px;
	height: 70px;
	border: 4px solid hsl(5, 40%, 70%);
	border-radius: 50%/50%;
	background: linear-gradient(top,  hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%);
	сursor: pointer;
	transform: rotate(30deg);
	
}
.round:active {
	width: 69px;
	height: 69px;
	box-shadow: 0 0 hsl(5, 60%, 60%);
	border: 3px solid hsl(5, 40%, 70%);
	background: linear-gradient(top,  hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%);
}

HTML

<div class="tower">
<a class="round" href=""></a>	
</div>

Button with indicator

CSS

.switch {
    width: 70px;
    height: 70px;
    position: relative;
	cursor: pointer;
}
.dot {
	position: absolute;
	top: 7%;
	left: 7%;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%/50%;
    background: hsl(0, 0%, 90%);
    box-shadow: 
        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%);
	z-index: 1;
}
.circ {
	display: block;
    position: absolute;
	width: 82px;
    height: 82px;
    top: 0; 
    left: 0;
    border-radius: 50%;
    background: linear-gradient(#ccc, #fff);
    box-shadow: 
        inset 0 2px 1px hsl(0, 0%, 75%),
		inset 0 -2px hsl(0, 0%, 75%);
        	 
}
.switch .dot:before {
    content: "";
    position: absolute;
    width: 20%;
    height: 20%; 
    left: 40%;
    top: 40%;
    border-radius: inherit;
    background: radial-gradient(#fff, #333);
 
}
.switch:active .dot:before {
    content: "";
	background: radial-gradient(#fff, #02A829);
}
.switch:active .dot {
	background: radial-gradient(#fff, #ccc);
	width: 69px;
	height: 69px;
}

HTML

<div class="switch">
	<div class="circ">
	<a class="dot"></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> 

I wish you creative success.

This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

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