Home / Tag Archives: essentials

Tag Archives: essentials

Pure CSS button Effects

Pure CSS Buttons.Some CSS3 Buttons. I was curious to see exactly what you could do with just CSS well SCSS. Any ideas on how to simplify it Demo/Download Author Jamie Pettman Created APRIL 09, 2015 Compatible browsers Chrome, Firefox, Safari   HTML Snippet <div class='wrapper'> <div class='title'> <h1>Pure CSS button …

Read More »

Colorful Flat Loading Icon

A different take on the loading icon. Developed using only in HTML and CSS. Kind of looks like the top of the Amazon Alexa. Demo and Download available. Demo Download Author matt henley Created NOVEMBER 13, 2018 License Open Compatible browsers Chrome, Firefox, Safari   HTML Snippet <div class="spinner"></div> CSS …

Read More »

CSS buttons styled to look like shirt buttons

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 …

Read More »

Shadow effect when mouse hover the CSS Button

Shadow effect when mouse hover the CSS Button that is no where as cool as here. Developed using css and html. Demo and download available. Demo Download Author Jarrod Thibodeau Created OCTOBER 10, 2018 License Open Compatible browsers Chrome, Firefox   HTML Snippet <div id="button"> <h2>w3tweaks</h2> <div id="buttonTwo"> <h2>w3tweaks</h2> </div> …

Read More »

Pressable, iOS Compatible CSS Button

Pressable, iOS Compatible CSS Button.A ‘pressable’ CSS button that is still pressable on mobile safari. The secret is having ontouchstart=”” set in a containing element, allowing the :active pseudo-class to work; the body tag is fine. I am pretty sure this won’t work on Android, but I don’t have a …

Read More »

3D CSS button plus jQuery

jQuery + 3D css button.Button created for the gamers league project v2 version. 3D button developed using CSS, HTML and jQuery. Demo and download available. Demo Download Author Carlos G Notario Created MAY 28, 2015 License Open Compatible browsers Chrome, Firefox, Safari   HTML Snippet <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <link href='https://fonts.googleapis.com/css?family=Montserrat:700' …

Read More »

Three Simple CSS Animation Button Hover Effects practice

Three Simple CSS Animation Button Hover Effects practice. Developed using css and html. demo and download available. Demo Download Author Dronca Raul Created JULY 19, 2016 License Open Compatible browsers Chrome, Firefox, Safari   HTML Snippet <!-- Hover #1 --> <div class="box-1"> <div class="btn btn-one"> <span>HOVER ME</span> </div> </div> <!-- …

Read More »

Vintage style css button

70s CSS Button. A nice little css button developed using CSS and html. demo and download available. Demo Download Author Jordan Halvorsen Created JANUARY 27, 2017 License Open Compatible browsers Chrome, Firefox, Safari   HTML Snippet <b>Funky Button <br><span>for your viewing pleasure</span></b> <section id="intro"> <div id="intro-content" class="center-content"> <div class="center-content-inner"> <div …

Read More »

Pure CSS toggle button switch with gray gradient

Flat out awesome Toggle button switch developed using pure css and html. Demo and download available. Demo Download Author Hugo Giraudel Created AUGUST 01, 2012 License Open Compatible browsers Chrome, Firefox, Safari   HTML Snippet <input type="checkbox" id="switch" name="switch"> <label for="switch" class="switch"></label> CSS Code *, *:after, *:before { box-sizing: border-box; …

Read More »

CSS designed buttons with animated hover effects

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. Demo Download Author Derek Morash Created MARCH 09, 2016 License Open Compatible …

Read More »