css button design
css buttons design with hover effect
- hello In a web development field The most important role play the interface of the web page. if web page is look pretty and attractive then user will spend more time on the site and if the interface of site is bad then it's irritate the user and make a bad impression.
- every web page includes button to navigate user and button play a very important role so if you design a Animated button in a unique style then visitors have a great experience with the site and he come again. other wise your bounce rate is high..
css (cascading style sheet) is a help to design and make Attractive webpage. css is a use for give style on any tag like button , div , font , bg...... without css website is a not look Attractive. css very easy and very helpful. css is a very popular in it . html is container that contain controls and css is a use to give that controls design and set to his position. without css webpage is is like empty wall ,css is improve user experince and user will focus on page..
hover effect on buttons css
today we see css button design.button is control. button is a control page and elements. and today we make this button stylish so user will attract and we add hover effect so button is animated. when user will hover on this button this button is give responce and its look cool.
what we learn👇
css for button
css button
css button style
button css
css button design
css button style
css buttons design for website
-first you need 2 file
1.html file 2.css file
1).css button border fill HTML FILE Coding-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">I'm Button</button>
</body>
</html>
css file coding-
*{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
}
body{
background: #353b49;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.btn{
width: 200px;
height: 60px;
background: none;
border: 4px solid white;
color: #e1ccec;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 16px;
position: relative;
}
.btn::before,.btn::after{
content: "";
position: absolute;
width: 160px;
height: 14px;
background: #353b48;
transform: skewX(50deg);
transition: .4s linear;
}
.btn::before{
top: -4px;
left: 10%;
}
.btn::after{
bottom: -4px;
right: 10%;
}
.btn:hover::before{
left: 110%;
}
.btn:hover::after{
right: 110%;
}
note-save this file in your computer. html file save with .html extension and other will save .css extension. save both html and css file to same location and run in your browser . and you can change css properties as per your choice . do not change id and class name. this code is from darkcode youtube channel.. please note...
some use full Articles
what is html click me to know
how to make login page using html
what is table and how to make in html
css for button
css button
css button style
button css
css button design
css button style
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="btn btn1"><b>home</b></button>
<button class="btn btn2"><b>About us</b></button>
<button class="btn btn3"><b>contact us</b></button>
<button class="btn btn4"><b>niljadav</b></button>
</div>
</body>
</html>
css code:-
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.btn{
border: none;
margin: 20px;
padding: 24px;
width: 220px;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
border-radius: 20px;
cursor: pointer;
color: #fff;
background-size: 200%;
transition: 0.6s;
}
.btn1{
background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.btn2{
background-image: linear-gradient(to left,#C4E538,#009432,#C4E538);
}
.btn3{
background-image: linear-gradient(to left,#12CBC4,#0652DD,#12CBC4);
}
.btn4{
background-image: linear-gradient(to left,#FDA7DF,#9980FA,#FDA7DF);
}
.btn:hover{
background-position: right;
}
note-save this file in your computer. html file save with .html extension and other will save .css extension. save both html and css file to same location and run in your browser . and you can change css properties as per your choice . do not change id and class name. this code is from darkcode youtube channel.. please note...
some use full Articles
what is html click me to know
how to make login page using html
what is table and how to make in html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="">
</head>
<body>
<section class="s4">
<a href="#" class="iconbtn fas fa-laptop"></a>
<a href="#" class="iconbtn fas fa-mobile-alt"></a>
<a href="#" class="iconbtn fas fa-cog"></a>
<a href="#" class="iconbtn fas fa-link"></a>
</section>
</body>
</html>
css code:-
body{
margin: 0;
padding: 0;
}
section{
height: 25vh;
display: flex;
justify-content: center;
align-items: center;
}
.s4{
background: #34495e;
}
.iconbtn{
width: 80px;
height: 80px;
text-decoration: none;
margin: 20px;
position: relative;
font-size: 30px;
border-radius: 50%;
}
.iconbtn::before{
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.iconbtn::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
z-index: 0;
}
.s4 .iconbtn{
border: 4px solid #fff;
color: #34495e;
}
.s4 .iconbtn::after{
background: #fff;
transition: 0.4s;
}
.s4 .iconbtn:hover::after{
transform: scale(1.3);
opacity: 0;
}
.s4 .iconbtn:hover{
color: #fff;
}
@keyframes ro {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
some use full Articles
what is html click me to know
how to make login page using html
what is table and how to make in html
css for button
css button
css button style
button css
css button design
css button stylenote-save this file in your computer. html file save with .html extension and other will save .css extension. save both html and css file to same location and run in your browser . and you can change css properties as per your choice .
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">I'm Button</button>
</body>
</html>
css file coding-
*{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
}
body{
background: #353b49;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.btn{
width: 200px;
height: 60px;
background: none;
border: 4px solid white;
color: #e1ccec;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 16px;
position: relative;
}
.btn::before,.btn::after{
content: "";
position: absolute;
width: 160px;
height: 14px;
background: #353b48;
transform: skewX(50deg);
transition: .4s linear;
}
.btn::before{
top: -4px;
left: 10%;
}
.btn::after{
bottom: -4px;
right: 10%;
}
.btn:hover::before{
left: 110%;
}
.btn:hover::after{
right: 110%;
}
note-save this file in your computer. html file save with .html extension and other will save .css extension. save both html and css file to same location and run in your browser . and you can change css properties as per your choice . do not change id and class name. this code is from darkcode youtube channel.. please note...
some use full Articles
what is html click me to know
how to make login page using html
what is table and how to make in html
what we learn👇
css for button
css button
css button style
button css
css button design
css button style
2).css button Animated gradient
html code:-<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="btn btn1"><b>home</b></button>
<button class="btn btn2"><b>About us</b></button>
<button class="btn btn3"><b>contact us</b></button>
<button class="btn btn4"><b>niljadav</b></button>
</div>
</body>
</html>
css code:-
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.btn{
border: none;
margin: 20px;
padding: 24px;
width: 220px;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
border-radius: 20px;
cursor: pointer;
color: #fff;
background-size: 200%;
transition: 0.6s;
}
.btn1{
background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.btn2{
background-image: linear-gradient(to left,#C4E538,#009432,#C4E538);
}
.btn3{
background-image: linear-gradient(to left,#12CBC4,#0652DD,#12CBC4);
}
.btn4{
background-image: linear-gradient(to left,#FDA7DF,#9980FA,#FDA7DF);
}
.btn:hover{
background-position: right;
}
note-save this file in your computer. html file save with .html extension and other will save .css extension. save both html and css file to same location and run in your browser . and you can change css properties as per your choice . do not change id and class name. this code is from darkcode youtube channel.. please note...
some use full Articles
what is html click me to know
how to make login page using html
what is table and how to make in html
3). icon button with css
html code:-<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="">
</head>
<body>
<section class="s4">
<a href="#" class="iconbtn fas fa-laptop"></a>
<a href="#" class="iconbtn fas fa-mobile-alt"></a>
<a href="#" class="iconbtn fas fa-cog"></a>
<a href="#" class="iconbtn fas fa-link"></a>
</section>
</body>
</html>
css code:-
body{
margin: 0;
padding: 0;
}
section{
height: 25vh;
display: flex;
justify-content: center;
align-items: center;
}
.s4{
background: #34495e;
}
.iconbtn{
width: 80px;
height: 80px;
text-decoration: none;
margin: 20px;
position: relative;
font-size: 30px;
border-radius: 50%;
}
.iconbtn::before{
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.iconbtn::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
z-index: 0;
}
.s4 .iconbtn{
border: 4px solid #fff;
color: #34495e;
}
.s4 .iconbtn::after{
background: #fff;
transition: 0.4s;
}
.s4 .iconbtn:hover::after{
transform: scale(1.3);
opacity: 0;
}
.s4 .iconbtn:hover{
color: #fff;
}
@keyframes ro {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
some use full Articles
what is html click me to know
how to make login page using html
what is table and how to make in html
what we learned👇
css for button
css button
css button style
button css
css button design
css button stylenote-save this file in your computer. html file save with .html extension and other will save .css extension. save both html and css file to same location and run in your browser . and you can change css properties as per your choice .
do not change id and class name. this
code is from darkcode youtube
thanks for visiting us..
if you liked this article like us and follow us on social media
this article is useful for you then share with your frds
Anil Jadav
thanks for visiting us..
if you liked this article like us and follow us on social media
this article is useful for you then share with your frds
Anil Jadav