[wp-trac] [WordPress Trac] #36553: Extend the button-link class

[WordPress Trac]

#36553: Extend the button-link class
-------------------------+-----------------------------
 Reporter:  Cheffheid    |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  General      |    Version:  trunk
 Severity:  normal       |   Keywords:
  Focuses:  ui           |
-------------------------+-----------------------------
 There are a fair amount of instances where links will need to be replaced
 by buttons (as part of #26504). In addition, they will need additional
 styling applied to make sure that the button looks and behaves like the
 link it's replacing (ie. the blue, with the underline, and the hover/focus
 colour change).

 Instead of applying the same block of CSS to all of those instances
 individually, I'd like to propose a more generic extension to the existing
 button-link class with a "like-anchor" class (or whatever, not sold on
 that name) to mimic the default anchor style:

 {{{
 .wp-core-ui .button-link.like-anchor {
         color: #0073aa;
         text-decoration: underline;
         -webkit-transition-property: border, background, color;
         transition-property: border, background, color;
         -webkit-transition-duration: .05s;
         transition-duration: .05s;
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
 }

 .wp-core-ui .button-link.like-anchor:hover,
 .wp-core-ui .button-link.like-anchor:active {
         color: #00a0d2;
 }

 .wp-core-ui .button-link.like-anchor:focus {
         color: #124964;
         -webkit-box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 1px rgba(30, 140, 190, .8);
         box-shadow:
                 0 0 0 1px #5b9dd9,
                 0 0 2px 1px rgba(30, 140, 190, .8);
 }
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36553>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform