Tag Archives: simple

CSS buttons styled to look like shirt buttons

By | November 14, 2018

CSS buttons styled to look like shirt buttons with a plaid flannel CSS background. There are not actually holes in the buttons. That is an illusion by placing different colored circles appropriately. Those are all done as a box-shadow from one transparent circle created from .button::after. The body tag is utilized to create the plaid design with repeating-linear-gradient.… Read More »

CSS designed buttons with animated hover effects

By | November 1, 2018

Inspiration for new ways to make interactive buttons using linear-gradients, box-shadows, and pseudo classes. Nice unique style and good use of css. This demo has six different CSS designed buttons with animated hover effects. Demo and download avilable.

Collection of various types of CSS buttons in various colors

By | October 24, 2018

Colorful CSS Buttons and A collection of various types of CSS buttons in various colors. Effects coverd border – open, border, Border Reversed – Open, Border Reversed, Fill Vertical – Open, Fill Vertical, Fill Horizontal – Open, Fill Horizontal. All the effects developed using CSS and HTML. Border, Border Reversed, Fill Vertical and Fill Horizontal are developed with… Read More »

Simple square shape animated Dot Loader

By | October 1, 2018

Simple animated loader develped using HTML, CSS and JavaScript. Demo and Download options available. Demo Download Author Kyle Brumm Created MARCH 26, 2017 License Open Compatible browsers Chrome, Firefox, Safari HTML Snippet <main class=”main container”> <div class=”col col–full”> <div class=”dot-loader”> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div>… Read More »

Simple Fun Little Loader

By | September 25, 2017

Beautiful simple light weighted animated Attractive loader using Pure CSS, HTML only. Demo and Download the zip (*.zip). Awesome loader code below HTML Snippet <div class=”loader”> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> CSS Snippet html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } *, *:before, *:after { box-sizing: border-box; outline: none;… Read More »

Car Gallery – AngularJs simple Project

By | November 28, 2016

Well so far we have brushed the basics of Angular and its very minimal basics and now I want to create a Sample project to illustrate the rest of the features of Angular to get a better perspective of the framework. Great, I am thinking of creating a Small Application, which will display some cars and its description. This application basically creates a list of cars with titles below and its description on the right hand side with a “More” button. By end of this tutorial you will get a clear understanding of Angular Services, Custom Directives, routing and of course how to use and mix various components of angular in to one application.