---
layout: single
title: Button
header: no
categories:
  - definition
  - easy
tags:
  - button
  - HCI
---

Διαδραστικό παράδειγμα κώδικα που δημιουργεί ένα κουμπί που εκτελεί διαφορετικές λειτουργίες κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδειγμα) και κατά την επιλογή του (Κλικ στο εικονίδιο). Για την λειτουργία της εμφάνισης διαφορετικού μηνύματος μετά από την επιλογή του εικονιδίου χρησιμοποιείται ένα απλοϊκό script σε κώδικα CoffeeScript. Η CoffeeScript είναι μια γλώσα προγραμματισμού που έπειτα μεταγλωτίζεται σε Javascript (http://coffeescript.org/), (https://en.wikipedia.org/wiki/CoffeeScript).

<p data-height="350" data-theme-id="17517" data-slug-hash="VvYoLm" data-default-tab="result" data-user="sckarolos" class='codepen'>See the Pen <a href='https://codepen.io/sckarolos/pen/VvYoLm/'>Button Concept</a> by sckarolos (<a href='https://codepen.io/sckarolos'>@sckarolos</a>) on <a href='https://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Ασκηση: Επεκτείνετε τον κώδικα του παραδείγματος έτσι ώστε κατά την επιλογή του κουμπιού (κλικ), να εφαρμόζεται μια λειτουργία της επιλογής σας.