آموزش CSS ripple effect buttons

آموزش CSS ripple effect buttons
آموزش CSS ripple effect buttons
Rate this post

آموزش CSS ripple effect buttons

If you have used lollipop version of android you see a nice ripple effect on button clicks. This tutorial is about achieving similar result, the css ripple effect using only css.

CSS Ripple effect does not involves any javascript or jquery library. The effect is achieved using CSS3 animation.

آموزش CSS ripple effect buttons

The button is basically a anchor tag, by having proper padding and background color the button looks pretty good as in image above.

Inside anchor tag(button) we placed another element <span> by setting its opacity to 0.3 and scaled it to 0.

Finally, For button hover event the animation is applied on opacity and scale property of <span> element to achieve CSS ripple effect. Go through below code for more details.

آموزش CSS ripple effect buttons

دموی آموزش CSS ripple effect

دانلود سورس آموزش CSS ripple effect

 

 

HTML

<a href="#" class="ripple-button1"><div class="wave1"></div>Ripple1</a>
&nbsp;&nbsp;
<a href="#" class="ripple-button2"><div class="wave2"></div>Ripple2</a>

CSS

* {
	padding:0;
	margin:0;
}

body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	background-color:#FFF;
	padding:50px;
	background-color:#EEE;
}

.ripple-button1, .ripple-button2{
	position:relative;
	width:150px;
	height:75px;
	background-color:#99C;
	color:#FFF;
	border-radius:3px;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
}

.wave1{
	position:absolute;
	width:75px;
	height:75px;
	background-color:#FFF;
	top:0;
	left:35px;
	transform: scale(0);
	opacity:0.5;
	border-radius:300px;
}

.wave2{
	position:absolute;
	width:150px;
	height:75px;
	background-color:#FFF;
	top:0;
	left:0;
	transform: scale(0);
	opacity:0.5;
}

.ripple-button1:hover > .wave1{
	animation: ripple-in1 2s;
}

.ripple-button2:hover > .wave2{
	animation: ripple-in2 2s;
}

 
@keyframes ripple-in1 {
 0% {transform: scale(0);}
 20%{transform: scale(1);opacity:0.3;}
 100%{transform: scale(1);opacity:0;}
}

@keyframes ripple-in2 {
 0% {transform: scaleX(0);}
 20%{transform: scaleX(1);opacity:0.3;}
 100%{transform: scaleX(1);opacity:0;}
}

 

آموزش CSS ripple effect buttons

Share

5 طرح CSS برای سایت های فروشگاهی

5 طرح CSS برای سایت های فروشگاهی
5 1

5 طرح CSS برای سایت های فروشگاهی

 

The 5+ CSS loading animation provided here may help your e-commerce website’s design look good. Hope, this tutorial helpful for you.

The CSS e-commerce loading animation does not uses any images/gif to do animation, also it does not uses any library to do animation stuff. The design and animations are achieved using only CSS.

The last three CSS e-commerce loading uses font awesome icon font for icons, if you don’t know what font awesome icons are then please read this article.

دانلود سورس کد CSS

5 طرح CSS برای سایت های فروشگاهی

CSS Spinning cart wheels loading animation

The major part of the cart is drawn from adding extra element from CSS3 :before and :after property.

cart Wheels are given infinite rotation from CSS3 animation.

Demo

HTML

<div id="cart-block">
  <div id="cart-body"> </div>
  <div id="cart-wheel1"> </div>
  <div id="cart-wheel2"> </div>
</div>

CSS

#cart-block{
	position:relative;
	width:90px;
}

#cart-body{
	border-top: 50px solid black;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	height: 0;
	width: 50px;
}

#cart-body:after{
  content: "";
  position:absolute;
  border: 0 solid transparent;
  border-top: 8px solid black;
  border-left: 8px solid black;
  width: 10px;
  height: 20px;
  top:-15px;
  right:-12px;
  transform: rotate(30deg);
  border-radius:5px;
}

#cart-body:before{
	position:absolute;
	content:"";
	border-top: 30px solid white;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	height: 0;
	width: 40px;
	top:10px;
	left:10px;
}

#cart-wheel1{
	position:relative;
	width:20px;
	height:20px;
	border-radius:100%;
	border:3px solid #000;
	background:rgba(0,0,0,0);
	top:1px;
	left:15px;
	animation: rotation 0.5s linear infinite;
}

#cart-wheel1:after{
	content:"";
	position:absolute;
	width:20px;
	height:3px;
	background-color:#000;
	top:8px;
}

#cart-wheel1:before{
	content:"";
	position:absolute;
	width:3px;
	height:20px;
	background-color:#000;
	left:8px;
}

#cart-wheel2{
	position:relative;
	width:20px;
	height:20px;
	border-radius:100%;
	border:3px solid #000;
	background:rgba(0,0,0,0);
	top:-25px;
	left:45px;
	animation: rotation 0.5s linear infinite;
}

#cart-wheel2:after{
	content:"";
	position:absolute;
	width:20px;
	height:3px;
	background-color:#000;
	top:8px;
}

#cart-wheel2:before{
	content:"";
	position:absolute;
	width:3px;
	height:20px;
	background-color:#000;
	left:8px;
}

@keyframes rotation {
 from {transform: rotate(0deg);}
 to {transform: rotate(360deg);}
}

Animated CSS loading e-commerce basket

The two new bars are drawn from CSS3 :after and :before property. the transform-origin of all three bars are set to bottom to make it scale from bottom and different speed duration is applied for each bar.

Demo

HTML

<div id="basket-block">
  <div id="basket-body"> </div>
  <div id="basket-handle"> </div>
  <div id="basket-strip"> </div>
</div>

CSS

#basket-block{
	position:relative;
}

#basket-body{
	position:absolute;
	border-top: 50px solid black;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 50px;
	padding:20px;
	top:0;
	left:0;
}

#basket-body:before{
	position:absolute;
	content:"";
	width:120px;
	height:20px;
	border-radius:10px;
	background-color:#000;
	top:-60px;
	left:-15px;
}

#basket-body:after{
	position:absolute;
	content:"";
	width:90px;
	height:20px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	background-color:#000;
	top:-10px;
	left:0px;
}

#basket-handle{
	position:absolute;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #000;
	top:-60px;
	left:30px;
}

#basket-handle:after{
	content:"";
	position:absolute;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid #fff;
	top:20px;
	left:-15px;
}

#basket-handle:before{
	content:"";
	position:absolute;
	width: 5px;
	height: 5px;
	border-radius:100%;
	top:10px;
	left:-2px;
	background-color:#fff;
}

#basket-strip{
	position:absolute;
	width: 10px;
	height: 35px;
	background-color:#fff;
	border-radius:10px;
	top:10px;
	left:25px;
	transform-origin:bottom;
	animation: scale 1s ease infinite;
}

#basket-strip:after{
	content:"";
	position:absolute;
	width: 10px;
	height: 35px;
	background-color:#fff;
	border-radius:10px;
	left:25px;
	transform-origin:top;
	animation: scale 1s ease infinite;
}

#basket-strip:before{
	content:"";
	position:absolute;
	width: 10px;
	height: 35px;
	background-color:#fff;
	border-radius:10px;
	left:50px;
	transform-origin:bottom;
	animation: scale 1s ease infinite;
}

@keyframes scale {
 0% {transform: scaleY(0);}
 50% {transform: scaleY(1);}
 100% {transform: scaleY(0);}
}

CSS hanging baskets loading animation

Uses font awesome icon for icons. An infinite rotation is applied for each icon from -30deg to 30deg.

Demo

HTML

<div class="fa fa-shopping-basket icon-basket"></div>
<div class="fa fa-shopping-basket icon-basket"></div>
<div class="fa fa-shopping-basket icon-basket"></div>

CSS

.icon-basket{
	font-size:36px;
	color:black;
	transform-origin:top;
	animation: rotation 2s ease infinite;
}

	
@keyframes rotation {
 0% {transform: rotate(-30deg);}
 50% {transform: rotate(30deg);}
 100% {transform: rotate(-30deg);}
}

Pure CSS cart glow animation

Uses font awesome icon for icons. Icon is scaled from 0 to 1 and vice-versa with opacity.

Demo

HTML

<div class="fa fa-shopping-cart icon-cart"></div>

CSS

.icon-cart{
	font-size:70px;
	color:#000;
	animation: scale 2s ease infinite;
}
	
@keyframes scale {
 0% {transform: scale(0.5);opacity:0;}
 50% {transform: scale(1);opacity:1;}
 100% {transform: scale(0.5);opacity:0;}
}

5 طرح CSS برای سایت های فروشگاهی

E-commerce basket CSS 3D rotation loading animation

Used font awesome for icon. Both Z and Y axis given rotation from 0 to 360 and vice-versa infinately.

Demo

HTML

<div class="fa fa-shopping-basket fa-5x icon-credit"></div>

CSS

.icon-credit{
	font-size:70px;
	color:#000;
	animation: scale 3s ease infinite;
}

@keyframes scale {
 0% {transform: rotateZ(0deg);transform: rotateY(0deg);}
 50% {transform: rotateZ(360deg);transform:rotateY(360deg);}
 100% {transform: rotateZ(0deg);transform:rotateY(0deg);}
}
Share