Css3 Buttons styles

By -
go to this link and see the live example
https://jsfiddle.net/csszilla/ssgp6mwr/5/
<html>
<head>

<title>csszilla</title>




<style>

.button {
  -moz-border-radius: 25px;
  -moz-box-shadow: #6E7849 0px 0px 10px;
  -moz-transform: rotate(0deg);
  -moz-transition: all 1s ease-in;
  -ms-transform: rotate(0deg);
  -ms-transition: all 1s ease-in;
  -o-transform: rotate(0deg);
  -o-transition: all 1s ease-in;
  -webkit-border-radius: 25px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transform: rotate(0deg);
  -webkit-transition: all 1s ease-in;
  background-color: #6E7849;
  background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: linear-gradient(90deg, #B9C788, #6E7849);
  border-radius: 25px;
  border: 2px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-size: 4em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #000000 5px 5px 15px;
  transform: rotate(0deg);
  transition: all 1s ease-in;
}

.button:hover {
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  background-color: #bab573;
  color: #ffffff;
  padding: 15px;
  text-shadow: #000000 5px 5px 26px;
  transform: rotate(360deg);
}








.btn1 {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 35px;
  padding: 4px 20px 10px 20px;
  text-decoration: none;
}

.btn1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: -moz-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: -ms-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: -o-linear-gradient(top, #3cb0fd, #2019e6);
  background-image: linear-gradient(to bottom, #3cb0fd, #2019e6);
  text-decoration: none;
}







.btn2 {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius:209px 50px 209px 50px;
  -webkit-box-shadow: 0px 3px 3px #95d6d3;
  -moz-box-shadow: 0px 3px 3px #95d6d3;
  box-shadow: 0px 3px 3px #95d6d3;
  font-family: Arial;
  color: #ffffff;
  font-size: 35px;
  padding: 5px 23px 10px 20px;
  text-decoration: none;
}

.btn2:hover {
  background: #ae41d9;
  background-image: -webkit-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -moz-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -ms-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -o-linear-gradient(top, #ae41d9, #2019e6);
  background-image: linear-gradient(to bottom, #ae41d9, #2019e6);
  text-decoration: none;
}







.btn3 {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 3px #21b8b0;
  -moz-box-shadow: 0px 3px 3px #21b8b0;
  box-shadow: 0px 3px 3px #21b8b0;
  font-family: Arial;
  color: #ffffff;
  font-size: 35px;
  padding: 5px 23px 10px 20px;
  border: dotted #25c759 2px;
  text-decoration: none;
}

.btn3:hover {
  background: #ae41d9;
  background-image: -webkit-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -moz-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -ms-linear-gradient(top, #ae41d9, #2019e6);
  background-image: -o-linear-gradient(top, #ae41d9, #2019e6);
  background-image: linear-gradient(to bottom, #ae41d9, #2019e6);
  text-decoration: none;
}





.btn4 {
  -moz-background-size: 3% 68%;
  -moz-border-radius: 25px;
  -moz-box-shadow: #6E7849 0px 0px 10px;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-background-size: 3% 68%;
  -webkit-border-radius: 25px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transition: all 0.5s ease-in-out;
  background-color: #de355c;
  background-image: -moz-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -ms-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -o-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -webkit-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: linear-gradient(90deg, #d7ad37, #de355c);
  background-size: 3% 68%;
  border-radius: 25px;
  border: 2px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-size: 4em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #2cba8b 5px 5px 15px;
  transition: all 0.5s ease-in-out;
}

.btn4:hover {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  padding: 15px;
  transform: scale(1.1);
}




.button5{
  -moz-background-size: 3% 68%;
  -moz-border-radius: 25px;
  -moz-box-shadow: #6E7849 0px 0px 10px;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-background-size: 3% 68%;
  -webkit-border-radius: 25px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transition: all 0.5s ease-in-out;
  background-color: #de355c;
  background-image: -moz-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -ms-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -o-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: -webkit-linear-gradient(90deg, #d7ad37, #de355c);
  background-image: linear-gradient(90deg, #d7ad37, #de355c);
  background-size: 3% 68%;
  border-radius: 25px;
  border: 2px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-size: 4em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #2cba8b 5px 5px 15px;
  transition: all 0.5s ease-in-out;
}

.button5:hover {
  -moz-box-shadow: #c3f218 3px 9px 10px;
  -moz-transform: rotate(-2deg) scale(1.1);
  -ms-transform: rotate(-2deg) scale(1.1);
  -o-transform: rotate(-2deg) scale(1.1);
  -webkit-transform: rotate(-2deg) scale(1.1);
  background-color: #e864cc;
  background-image: -moz-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: -ms-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: -o-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: -webkit-linear-gradient(90deg, #d765bb, #e864cc);
  background-image: linear-gradient(90deg, #d765bb, #e864cc);
  box-shadow: #c3f218 3px 9px 10px;
  padding: 15px;
  text-shadow: #62f335 5px 5px 15px;
  transform: rotate(-2deg) scale(1.1);}

</style>

</head>

<body><H2 style="background-color:ORANGE; color:WHITE; text-align:center;">some css3  styles buttons.</H2>
<span  class="button">CssZilla</span>
<span  class="btn1">CssZilla</span>
<span class="btn2">CssZilla</span>
<span  class="btn3">CssZilla</span>
<span  class="btn4">CssZilla</span>
<span  class="button5">CssZilla</span>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

50 Beautiful Color Palettes for Your Next Web Project

By -
Image
1 Ideas 4 Homes 2 Cardsox 3 Fitz Fitzpatrick 4 Campfire 5 Aladdin 6 Chrome Sports 7 Papua New Guinea 8 Barni Design 9 Instapuzzle 10 Our Little Projects 11 State of the Owner 12 SoftwareMill 13 iGaranti 14 Vintage Romantic 15 This isn’t a color palette!? You’ve got a sharp eye. Do you love tackling fun & challenging design projects for smart, ambitious clients? Do you find your happy place while savoring the perfect cup of coffee in the morning? We’re hiring for a senior UX/UI Designer just like you.  See what it’s like to work with us 16 Nicholas Jackson Design 17 1920 Leyendecker 18 WerkPress 19 Silmo Paris 20 Dark Sunset 21 The Color of Traffic 22 MandLoys 23 Sa Barca de Formentera 24 Contad
Read more

right side toggle by js, toggle from ride side by js, toggle js for website, form toggle from right side js, js for form toggle from right side

By -
<!DOCTYPE html> <html lang="en-US"> <head itemscope="" itemtype="https://schema.org/WebSite"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> .floating-form {     max-width: 280px;     padding: 20px 20px 10px;     font-size: 13px;     font-family: "Open Sans", sans-serif;     background: #F9F9F9;     border: 1px solid #ddd;     right: -320px;     position: fixed;     box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);     -moz-box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);     -webkit-box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);     z-index: 9999 } .contact-opener {     position: absolute;     left: -80px;     top: 100px;     padding: 9px;     color: #fff;     cursor: pointer; } .floating-form.open {     right:0px; } .floating-form-heading {     font-weight: 700;     font-style: italic;     border-bottom: 2px solid #ddd;     margin-bottom: 10px;     font-size: 15px;   
Read more