CSS Styling Buttons (Animated Buttons)
We will use CSS styles for creating animated buttons. It changes the background color, text color, position, shadow etc. of the button, depending on various buttons states (hover, active, focus).
Arrow on Hover
This example uses CSS :hover on button to show a arrow.
:hover - This state of button will take effect, when mouse
comes over it.
Example
<style>
.button1 {
display: inline-block;
border-radius: 20px;
background-color: #0054ff;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
/* Button Text Styling */
.button1 span {
cursor: pointer;
display: inline-block;
position: relative; /* Used to change text position */
transition: 0.5s; /* time taken to for changes to take effect */
}
/* Arrow after button text */
.button1 span:after {
content: '\00bb'; /* Double arrow uni-code character, You can replace by your own. */
position: absolute;
opacity: 0; /* Hidden By Default */
top: 0;
right: -20px; /* for positioning arrow 20px to the right */
transition: 0.5s;
}
.button1:hover span {
padding-right: 25px; /* Position the span inside button 25px away from the right */
}
.button1:hover span:after {
opacity: 1; /* Arrow visible */
right: 0; /* Position the arrow 0px to the right */
}
</style>
</head>
<body>
<!-- Vertical-align: middle, for aligning text and arrow in the same line -->
<button class="button1" style="vertical-align:middle"><span>Hover </span></button>
Pressed Effect
This example uses CSS :active on button to show pressed effect.
:active - This state of button will take effect, when mouse clicks on it.
Example
<style>
.button2 {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #0054ff;
border: none;
border-radius: 20px;
box-shadow: 0 9px lightblue; /* Adding light blue shadow for the button to elevate */
}
.button2:hover {background-color: #0094ff} /* On Hover Change Background Color */
.button2:active { /* On click change background-color and box-shadow to darkblue */
background-color: #0000ff;
box-shadow: 0 5px darkblue;
/* 5px is the spread of box-shadow,
you can change it to lower level or higher, according to your needs. */
transform: translateY(4px);
/* Change the position of button by moving it 4px on the Y-axis. */
}
</style>
</head>
<body>
<button class="button2">Click Me</button>
Fade in Button
This example uses CSS :hover on button to show button. It changes it's opacity within .3s (transition time) from 0.5 to 1 to show a fade effect.
:hover - This state of button will take effect, when mouse comes over it.
Example
<style>
.button3 {
background-color: #0054ff;
border: none;
border-radius: 20px;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6; /* Opacity is used to add transparency to button */
transition: 0.3s; /* Transition of 0.3s to change oapcity from 0.6 to 1 */
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button3:hover {opacity: 1} /* On Hover change opacity to 1 */
</style>
</head>
<body>
<button class="button3">Hover Over Me</button>
Ripple Effect in Button
This example uses CSS :active on button to show ripple. It first creates a off-white background on top of button, and hides it by changing it's opacity to 0. On Click, changes it's opacity within .8s (transition time) from 0 to 1 to show a ripple effect.
:active - This state of button will take effect, when mouse clicks on it.
Example
<style>
.button4 {
position: relative;
background-color: #0054ff;
border: none;
border-radius: 20px;
font-size: 28px;
font-family: inherit;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button4:after { /* Creating white background, that is shown as ripple */
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0; /* Hidden by default */
transition: all 0.8s
}
.button4:active:after { /* Shown after clicking on button */
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
</style>
</head>
<body>
<button class="button4">Click Me</button>
Comments
Post a Comment