recentpopularlog in

piperh : button   49

a few button transformations with quick code copy. Nothing unusual here but could be handy for speed. Some hover transitions and a few loading spinners
webdesign  web  design  button  hover  loading  snippets  css  gallery  animation  code  copy 
yesterday by piperh
Stop Misusing Toggle Switches
about use of toggle switch, checkbox and button, according to context and state
webdesign  web  design  checkbox  switch  toggle  button  state  action  control  contextual  ux  ui 
3 days ago by piperh
Pretty checkbox | Custom checkbox and radio buttons in pure css | Beautiful and nice looking
a css library to style buttons and checkboxes. V nice designs though maybe it would bloat your code if you only needed one or two.
webdesign  web  design  radio  button  checkbox  css  style 
6 weeks ago by piperh
Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
overview of methods to ensure accessibility of buttons (best put text in them, but if it's only an icon ...)
webdesign  web  design  button  accessible  accessibility  aria  icon 
10 weeks ago by piperh
Safari brings Web Share to desktop | Web Platform News
about the Web Share API - available in some browsers, behaves like the share button in apps
webdesign  web  design  button  share  api  safari  browser 
may 2019 by piperh
Designing button focus states for better usability - DEV Community 👩‍💻👨‍💻
short, not very interesting piece about focus state, but has useful list of resources at end
webdesign  web  design  button  focus  state  accessibility  accessible  css 
april 2019 by piperh
Hacking Custom Checkboxes And Radios – Hacker Noon
about styling custom checkboxes and radio buttons, while maintaining accessibility
webdesign  web  design  checkbox  toggle  switch  radio  button  css  default  customise  style  accessible 
april 2019 by piperh
GitHub - github/details-menu-element: A menu opened with a <details> button.
using <details> and <summary> html tags to open a menu of radio buttons. The selected text then appears in the <detail> text when the menu is collapsed.
Could be handy sometime
webdesign  web  design  js  javascript  script  html  detail  summary  button  radio  tag 
march 2019 by piperh
When Is A Button Not A Button? — Smashing Magazine
nice reminder of how to use html's own semantics - good for accessibility and keyboard tabbing. Brush up on <button type="button"> ("submit" is default value for a button, he says). He suggests using "disabled" attribute for button or fieldset but I don't see how one would trigger it. 'disabled' attribute also removes element from tab order
webdesign  web  design  button  html  semantic  attribute  vale  accessibility  accessible  element 
march 2019 by piperh
Unbuttoning Buttons |
explains how to make a block of text behave like a button, by using css, aria and js to restyle the button element. Complicated and possibly not worth worrying about
webdesign  web  design  button  css  inline  selector  accessible  reset  style  styling 
october 2018 by piperh
Styled checkbox and radio buttons from Filament but dependent on jQuery or Showstring (another js lib). Very nicely done but look like a fair amount of faff ( too much faff in fact for Amantaní ). The css file is long
webdesign  web  design  accessible  checkbox  radio  button  custom  filament  styled  css  js  javascript  script 
october 2018 by piperh
Customise radio buttons without compromising accessibility
techniques for fancying up radio buttons and maintaining accessibility
webdesign  web  design  css  radio  button  accessible  accessibility 
september 2018 by piperh
Easy Toggle State
a js library to enable typical ui toggle effects and needs, like dropdowns, accordion, collapsible panel, switch, and more. With code examples and with added ARIA.
They say: Only set a few HTML attributes, and code the rest with your CSS skills.
3.6k compressed
webdesign  web  design  js  javascript  script  library  toggle  dropdown  navigation  button  tooltip  collapse  collapsible  modal  popup  switch  checkbox  radio 
june 2018 by piperh
Styling buttons, the right way
resetting and styling button and link elements
webdesign  web  design  link  button  css  component  style 
may 2018 by piperh
Particle Effects for Buttons | Codrops
a disintegrate-to-particles effect on buttons. Didn't check to see if it's css or js
webdesign  web  design  animation  effect  button  particle  disintegrate 
may 2018 by piperh
The Ultimate Guide to Bulletproof Buttons in Email Design
article about coding buttons in html email. Don't use an image they say.
email  html  design  button  css  code  padding  pad  border  support  reference  table 
november 2017 by piperh
library of css animations for buttons, modals, scrolls, nav, transitions, captions, tooltips, tabs. Useful, if the code is good. They claim to be performant, no janks
webdesign  web  design  css  transition  animation  effect  tab  button  slide  fade  modal 
november 2017 by piperh
Patterns - The A11Y Project
very handy code and script library for frequent actions and features: dropdowns, accordions, tabs, toggles, buttons, modals, tooltips and more.
webdesign  web  design  code  coding  js  javascript  script  toggle  modal  button  breadcrumb  aria  accessible  accessibility  pattern  menu  accordion  tab  tooltip  player 
november 2017 by piperh
Social Media Sharing Buttons. No JavaScript. No tracking. Super fast and easy.
generates file sharing buttons html and css that don't use js and don't download tracking stuff. Less http requests, smaller files.
webdesign  web  design  social  media  share  sharing  button  facebook  fb  twitter  pinterest  google+  tumblr  http  request  generator 
august 2016 by piperh
js for making ios style on-off slidey buttons
webdesign  web  design  css  ios  switch  check  button  on  off  checkbox  js  javascript 
june 2016 by piperh
22 Essential CSS Recipes
article showing some great uses of css. Not all supported by all modern browsers but worth rereading now and again
webdesign  web  design  css  html  blend  mode  gradient  transition  z-index  currentColor  object-fit  checkbox  radio  button  counter  shadow  @supports  position  sticky  vw  vh  scroll 
january 2016 by piperh
they say: "A set of small, responsive CSS modules that you can use in every web project". Includes some responsive menus but not slide out from side.
This is a Yahoo framework project
webdesign  web  design  grid  layout  responsive  css  code  modules  form  button  table  menu 
june 2015 by piperh
Hover.css - A collection of CSS3 powered hover effects
some nice effects, some naff. they don't all work very well on touch screen - check before using any of these
webdesign  web  design  hover  effect  css  button  link  transition 
june 2015 by piperh
14 Rules for Creating CTA Buttons That Work
sensible article about positioning and design of cta buttons
webdesign  web  design  graphic  marketing  call-to-action  button  cta  usability  effective 
april 2015 by piperh
Edit fiddle - JSFiddle
jquery and html code to ensure that only one checkbox is checked. Script in html must go AFTER the checkboxes. Needs request for jquery in doc head
webdesign  web  design  webdev  jquery  script  checkbox  radio  button  checked  jsfiddle 
february 2014 by piperh

Copy this bookmark:

to read