April 1, 2015

Wake me up - Animation with CSS selectors

Wake me up - Animation with CSS selectors

Experimenting animation with selectors in CSS. You can also combine pseudo selectors e.g: button:hover:after, which can be used to add a hover effect.


<div class="container">
   <p>Wake me up</p>


@import url(http://fonts.googleapis.com/css?family=Ribeye+Marrow);

.container {
   margin: 0 auto;
   position: relative;
   text-align: center;
   width: 420px;

.container p {
   color: #000;
   cursor: pointer;
   background: #ffffde;
   padding: 5px 0;
   border-radius: 50px;
   opacity: 0.2;
   text-transform: uppercase;

p:hover + h1:after {
   content: '{0_0}';

h1:after {
   content: '{-_-}';
   color: #d94362;
   font-family: 'Ribeye Marrow', cursive;
   font-size: 4em;

No comments:

Post a Comment

Popular Posts