Styling click button

Question

davy_yg 2 Posting Whiz

11 Years Ago

Hello,

I am trying to style click button further. Is it possible?

Here is my current button:

red plain color.

I would like to put orange border with transparent background.

portfolio-filter.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>

.btn {

     width: 100px;
     background-color: red;
     color: white;  

     }


#box {

      padding: 10px;

     }

.yellow, .grey, .red, .classy {

      padding: 8px;

     }

</style>
</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="filters" class="button-group">
  <button class="btn" data-filter="*">All</button>
  <button class="btn" data-filter=".yellow">Yellow</button>
  <button class="btn" data-filter=".red">Red</button>
  <button class="btn" data-filter=".grey">Grey</button>
  <button class="btn" data-filter=".classy">Classy</button>
</div>

<br><br>
<div id="box">
  <div class="grey" data-category="transition" data-name="classy6">
    <img class="name" src="Images/Portfolio/portfolio1.jpg" width="270px">    
  </div>
  <div class="red" data-category="metalloid" data-name="classy5">
    <img class="name" src="Images/Portfolio/portfolio2.jpg" width="270px">   
  </div>
  <div class="yellow" data-category="metalloid2" data-name="classy4">
    <img class="name" src="Images/Portfolio/portfolio3.jpg" width="270px">   
  </div>
  <div class="classy" data-category="metalloid3" data-name="classy3">    
    <img class="name" src="Images/Portfolio/portfolio4.jpg" width="270px">
  </div>   

  <div class="yellow" data-category="metalloid4" data-name="classy2">
    <img class="name" src="Images/Portfolio/portfolio5.jpg" width="270px">   
  </div>
  <div class="grey" data-category="metalloid5" data-name="classy1">  
    <img class="name" src="Images/Portfolio/portfolio6.jpg" width="270px">
  </div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  /*var $grid = $grid.isotope({*/
  var $container = $('#box').isotope({ 
    getSortData: {
      name: '[data-name]',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<!-- filter -->

<script>

// init Isotope
var $container = $('#box').isotope({
  // options
});
// filter items on button click
$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

</script>

<script>

$container.isotope({ filter: '.yellow' });
$container.isotope({ filter: '.red' });
$container.isotope({ filter: '.grey' });
$container.isotope({ filter: '.classy' });
$container.isotope({ filter: '*' });

</script>

<!-- end filter -->

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<div align="center">
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</div>



<?php include('footer.php'); ?>



</body>
</html>

javascript user-interface web-design

2 Contributors
1 Reply
204 Views
6 Days Discussion Span
Latest Post 11 Years Ago Latest Post by Member #1112232

Dani AI

Generated 7 Months Ago

Short, practical follow-up to the thread: the approach suggested by (an outlined/“no-fill” button) is the right direction for an orange-bordered filter button. A few extra points will make that style stable, accessible, and easy to maintain with your Isotope setup.

Browsers add their own button chrome and borders, so normalize the element and prevent layout jump when adding a border. Use a reset for appearance, keep box-sizing set so added borders don’t change the element width, and add a gentle transition for hover/press feedback:

.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;    /* keeps width consistent when borders are added */
  cursor: pointer;
  transition: box-shadow .12s ease, transform .08s ease;
}

Make the active/selected state obvious and keyboard-friendly. Isotope buttons work well with a “checked” class plus an ARIA state — that gives visual feedback and helps screen-reader users. Example jQuery to toggle both class and aria attribute (add this alongside your existing filter handler):

$('#filters').on('click', 'button', function(){
  $(this).addClass('is-checked').siblings().removeClass('is-checked');
  $(this).attr('aria-pressed','true').siblings().attr('aria-pressed','false');
});

Troubleshooting and polish: prefer padding over fixed widths for responsiveness; keep a visible focus style (use :focus-visible rather than removing outlines); if adding a border shifts layout, either use box-sizing: border-box or simulate the outline with an inset box-shadow; ensure the border color meets contrast guidelines against the page background; and add type="button" to avoid accidental form submits. These small steps keep the orange-outline idea visually clean, usable, and robust with your filter code.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Member #1112232 · Answer 1 · 2015-08-12T05:51:14+00:00

You should apply the .btn class a border: 1px solid orange and background-color: transparent