Some Cool CSS Animated Buttons

January 8, 2017

Button one: "Pressed" effect.

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>

<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button">Click Me</button>

</body>
</html>

Button Two: Add an Arrow on Hover.

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>

<h2>Animated Button</h2>

<button class="button"><span>Hover </span></button>

</body>
</html>

Button Three: "Ripple" Effect on Click.

CODE:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>

<h2>Animated Button - Ripple Effect</h2>

<button class="button">Click Me</button>

</body>
</html>

SEE WORKING BUTTONS HERE

css animated buttonsHow to animate buttons

Back to CodeTrove

We bring it for information professionals and clients.

Being an Information Professional can be a daunting reality. Information Professionals come in all shapes and sizes. We are academics, librarians, archivists, curators, data analysts, systems analysts, information architects, database engineers, software engineers, Web and Mobile developers, content marketers, bloggers, copy writers, project managers, scrum masters, podcasters and a thousand other possibilities. We work in universities, institutions, corporations, and as self-employed freelancers. We work as employees, owners, contractors, remote workers and digital nomads. So, where does an information professional turn to make sense and order of the din and best position him or herself for success? The IAM Platform is designed precisely to answer that question. Information Access and Management is a VAST subject that concerns not only how information professionals interact with information, but how our interaction with information changes the information landscape itself and thereby our possibilities. With the IAM Platform, information professionals can find a reliable home where access to support and work integrate fully with whatever work style or life style they have chosen. You're never alone with IAM.

Being a Client in the information economy can be overwhelming. It seems like just when Clients have finally gotten a good foundational understanding of the information landscape everything changes, and sometimes overnight! So how do Clients looking for products and services that drive success in today's sharing economy navigate such changing waters? The IAM Platform of Products and Services is designed to answer precisely that question. Our unique community of the highest quality information professionals coupled with years of project management experience guarantees that your needs will be met with the exact solution they require, every time. Our insistence upon your satisfaction includes your own personal concierge treatment throughout your project life cycle. Finally our outstanding community atmosphere and rigorous testing procedures allow all bugs to be shallow so your project stands the best chance of entering the marketplace already anticipating most of the errors that could take place on launch. If errors do crop up, we stand by our work, 100%.

The best place to start is to hit up our Network. The button below takes you there. Just fill out a simple registration form, it's free, and you will have access to our growing knowledge base in a growing number of areas tailored for every flavor of information work. We are working hard to create a community of information professionals and clients where everyone will have a voice. If you don't find what you are looking for or there isn't anything available for your kind of information work or client needs, contact us and we can create a section for that kind of work. Once we do, maybe you can be the person who starts that area up and works it. We look forward to working with you to tackle one of the most pressing issues of our time, Information Access and Management.

Go Now!