An animation effect for confirming button interactions that’s ideal forUXdesignanduserexperience
Create a simple ripple effect
- Document initiation
The first step is to initialise the web page as a HTML
document. This HTML describes the page as the
HTML document container, which stores the head
and body sections. While the head section is used to
include the external Javascript and CSS resources,
the body section is used to store the content
elements created in step 2.
<!DOCTYPE html>
<html>
<head>
<title>Ripple Button</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
</head>
<body>
*** STEP 2 HERE
</body>
</html>- HTML buttons
Each button is made from the HTML button tag with
the effect being applied via the ripple class. These
additional options will be defined within the CSS to
apply colour, size and text shadow. HTML’s ability to
apply more than one class to an element allows for a
small number of classes to produce many
presentation combinations.
<button class=”ripple”>Ripple Button</button>
<button class=”ripple red shadow”>
Ripple Button</button>
<button class=”ripple big”>Ripple Button
</button>
<button class=”ripple big red shadow”>
Ripple Button</button>- CSS: body initiation
Create a new file called “styles.css”. This step applies a
background image to cover the document body so that
the ripple effect can be demonstrated over visible
background content. With the image being placed to
enhance the visibility of the ripple effect, you have the
choice to skip this step for real projects.
body{
background: url(‘image.jpg’) black;
background-size: cover;
}- Initiate ripple
The ripple effect is based on a circular background
gradient, set to be coloured from transparent to white
and then transparent again. The result of this gradient
combination is a circular pattern that fades in and out of
transparency — like a ripple. With a default background
size much bigger than the button, the applied transition
results in the background being animated to this size to
this state after being clicked..ripple {
position: relative;
background: transparent radial-gradient
(circle,
transparent 1%,
rgba(255,255,255,.5) 10%,
transparent 1%) center;
background-size: 2000%;
background-position: center;
transition: background 1s, opacity 1s;
font-size: 1em;
opacity: .75;
color: #fff;
}5. Activate ripple
While the hover selector sets the button to appear fully
visible whenever hovered over by the mouse pointer,
the active selector triggers the ripple effect when the
button is clicked. With the transition and background
set up in step 4, this step resizes the base image and
sets the transition for immediate activation upon
releasing the button. The button is also set to be semi
transparent when held by the mouse pointer..ripple:hover{
opacity: 1;
}.ripple:active {
background-size: 0;
transition: 0s;
opacity: .25;
}6. Additional properties
The additional properties available to apply to the
ripple buttons are defined in this step. When applied
to a button’s class list within the HTML, the extra
classes will work as an extension to the properties
defined by the ripple class. The result of this
extension allows ripple buttons to appear with
different sizes, colours and text shadows..big{ font-size: 2em; }
.red{ color: red; }
.shadow{
text-shadow: 2px 2px 2px black;
}7. Shared button styles
All buttons are set to share common properties for
consistency regardless of whether they are set to
use the ripple effect or not. This step sets all buttons
to have a thin border and padding that’s
proportionate to their font size. No colour is applied
to the border, meaning that it will inherit the colour
used for the button text.button
{
border: .1mm solid;
padding: 1em;
}lightbox ________________________________________________ 27LightBoxg
Adult Swim Singles